自定义组件

switch

hide code

<my-switch class="checkbox" v-model="checked" />
<script>
    export default {
        data() {
            return {
                label: '',
                checked: false,
                label1: ''
            }
        }
    }
</script>
<style scoped>
    .checkbox {
        margin-bottom: 10px;
    }
</style>

textarea

description

hide code

<my-textarea label="Label"
             name="label"
             info="hahha"
             v-model="label1" />
<script>
    export default {
        data() {
            return {
                label: '',
                checked: false,
                label1: ''
            }
        }
    }
</script>

input

Label

hide code

<my-input label="Label"
          name="label"
          info="hahha"
          v-model="label" />
<script>
    export default {
        data() {
            return {
                label: '',
                checked: false,
                label1: ''
            }
        }
    }
</script>

color-picker

选择颜色

hide code

<color-picker title="选择颜色" />

button

hide code

<div class="buttons">
    <my-button>default</my-button>
    <my-button type="primary">primary</my-button>
    <my-button type="dark-light">dark-light</my-button>
    <my-button type="light">light</my-button>
    <my-button type="light-dark">light-dark</my-button>
    <my-button type="color-primary">color-primary</my-button>
    <my-button type="error">error</my-button>
    <my-button type="gray-primary">gray-primary</my-button>
    <my-button type="color-error">color-error</my-button>
    <my-button type="disable">disable</my-button>
    <my-button type="color-disable">color disable</my-button>
</div>

<style lang="less" scoped>
    .buttons {
        button {
            margin-bottom: 8px;
        }
    }
</style>