yll-qfui
v1.1.3
Published
ui
Downloads
4
Readme
###安装
cnpm i yll-ui -S
###使用
配置 在main.js
import ElementUI from 'yll-ui'
import 'yll-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
###组件多选框
<template>
<el-checkbox-group v-model="checkList">
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用" disabled></el-checkbox>
<el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
data() {
return {
checkList: ["选中且禁用", "复选框 A"],
};
},
};
###Switch 开关
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<script>
export default {
data() {
return {
value: true,
};
},
};
</script>
###组件框框
<template>
<fieldset>
<legend>{{title}}</legend>
<slot></slot>
</fieldset>
</template>
<script>
export default {
name: "qfui-kuangkuang",
props: {
title: {
type: String,
},
},
};
###组件分页
<template>
<div class="page">
<span v-for="n in total" v-bind:key="n" @click="changePageFn(n)">
{{n}}
</span>
</div>
</template>
<script>
export default {
name: "qfui-page",
props: {
total: {
type: Number,
},
},
methods: {
changePageFn(n) {
this.$emit("changePageFn", n);
},
},
};
</script>