Avue在laravel中的使用

Avue在laravel中的使用

前言：Avue是element-ui的二次封装组件库，也是在vue基础上使用的，或者是整合了laravel+vue的框架中使用。

1：安装（使用npm方式安装）

npm i @smallwei/avue -S

2：在app.js(或者main.js）中引入

import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue, {
size: 'medium',
menuType: 'text',
});

3：在页面中使用（和element-ui相似）

 <el-row :span="24"><el-col :span="6">值:{{form}}<br><avue-input-tree default-expand-all v-model="form" placeholder="请选择内容" type="tree" :dic="dic"></avue-input-tree></el-col><el-col :span="24"></el-col><el-col :span="6">包含父类值:{{form1}}<br><avue-input-tree multiple v-model="form1" placeholder="请选择内容" type="tree" :dic="dic"></avue-input-tree></el-col><el-col :span="24"></el-col><el-col :span="6">不包含父类值:{{form2}}<br><avue-input-tree leaf-only="" multiple v-model="form2" placeholder="请选择内容" type="tree" :dic="dic"></avue-input-tree></el-col><el-col :span="24"></el-col><el-col :span="6">半选是否包含父类值:{{form33}}<br>半选是不包含父类值:{{form3}}<br><avue-input-tree ref="tree" include-half-checked="" multiple v-model="form3" placeholder="请选择内容" type="tree" :dic="dic"></avue-input-tree></el-col><el-col :span="24"></el-col><el-col :span="6">父子不关联:{{form4}}<br><avue-input-tree :check-strictly="true" multiple v-model="form4" placeholder="请选择内容" type="tree" :dic="dic"></avue-input-tree></el-col></el-row>export default {data() {return {form:'',form1:[0,1,2,3,4],form2:[1,2,3],form3:[2,1],form33:[],form4:[0],dic:[{label:'选项1',value:0,children:[{label:'选项3',value:2},{label:'选项4',value:3}]},{label:'选项2',value:1}]}},watch:{form3:{handler() {setTimeout(()=>{this.form33=this.$refs.tree.getHalfList();},0)},immediate: true,}}
}

4：页面效果

5：框架版本
laravel6.0+vue2.6

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！