wqj-ui v0.1.1

一、wqj-ui组件库使用手册

1、下载

yarn add wqj-ui(推荐) 或者 npm i wqj-ui

2、引入

在main.js引入js和css

import WQJ from 'wqj-ui'
import 'wqj-ui/dist/wqj-ui.css'
Vue.use(WQJ)

3、使用 在App.vue使用

<template>
	<div id='app'>
        <t-button type='success'>按钮</t-button>
        <t-button type='primary'>按钮</t-button>
   		<t-button type='warning'>按钮</t-button>
        <t-button type='danger'>按钮</t-button>
        <t-button type='info'>按钮</t-button>
    </div>
</template>

二、组件介绍

1、button组件

（1）参数支持

（2）icon支持的图标类名

test-icon-circle-close、test-icon-view、test-icon-close、test-icon-message、test-icon-edit、test-icon-Star、test-icon-delete、test-icon-search、test-icon-check

<t-button type='success' plain>按钮</t-button>
<t-button type='danger' round>按钮</t-button>
<t-button type='warning' circle>按钮</t-button>
<t-button type='info' disabled>按钮</t-button>
<t-button icon='test-icon-view'>按钮</t-button>

（3）事件支持

<t-buttton type='success' @click='handleClick'></t-buttton>

export default {
    methods: {
        handleClik () {
            console.log('我被点击了!')
        }
    }
}

2、dialog组件

（1）参数支持

（2）插槽支持

（3）使用示例

<t-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :show-close='false'
    >
      <span>这是一段信息</span>
      <span slot='title'>这是wqj-ui</span>
      <span slot="footer" class="dialog-footer">
        <t-button @click="dialogVisible = false">取 消</t-button>
        <t-button type="primary" @click="dialogVisible = false">确 定</t-button>
      </span>
</t-dialog>

export default {
    data () {
        return {
            dialogVisble: true
        }
    }
}

3、input组件

（1）参数支持

（2）事件支持

（3）使用示例

<t-input placeholder='请输入用户名...' clearable></t-input>
<t-input placeholder='请输入密码...' type='password' show-password>

4、switch组件

（1）参数支持

（2）事件支持

（3）使用示例

<t-switch
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    @input='fn'>
</t-switch>

export default {
    data () {
        return {
            value: true
        }
    },
    methods: {
        fn (value) {
            console.log(value)
        }
    }
}

5、radio组件

（1）参数支持

（2）使用示例

<t-radio label='备选项1' v-model='checked'></t-radio>
<t-radio label='备选项2' v-model='checked'></t-radio>
<t-radio label='备选项3' v-model='checked'></t-radio>

export default {
    data () {
        return {
            checked: '备选项3'
        }
    }
}

6、radio-group组件

（1）使用说明

使用t-radio-group组件包裹t-radio组件，这样就不需要给每个t-radio设置v-model

（2）使用示例

<t-radio-group v-model='checked'>
	<t-radio label='备选项1'></t-radio>
    <t-radio label='备选项2'></t-radio>
    <t-radio label='备选项3'></t-radio>
</t-radio-group>

export default {
    data () {
        return {
            checked: '备选项3'
        }
    }
}

7、checkbox组件

（1）参数支持

（2）使用示例

<t-checkbox v-model='checkbox' label='备选项1'></t-checkbox>

export default {
    data () {
        return {
            checkbox: true
        }
    }
}

8、checkbox-group组件

（1）使用说明

使用t-checkbox-group包裹t-checkbox选中多个框

（1）参数支持

（2）使用示例

<t-checkbox-group v-model='checkboxArr'>
	<t-checkbox label='备选项1'></t-checkbox>
    <t-checkbox label='备选项2'></t-checkbox>
    <t-checkbox label='备选项3'></t-checkbox>
</t-checkbox-group>

export default {
    data () {
        return {
            checkboxArr: ['备选项1','备选项2']
        }
    }
}

9、form组件

（1）使用说明

用来包裹表单组件的

（2）参数支持

（3）使用示例

<t-form :model='form' :label-width='60px'>
    <t-form-item label='用户名'>
        <t-input v-model='form.username' placeholder='请输入用户名...'></t-input>
    </t-form-item>
     <t-form-item label='密码'>
        <t-input v-model='form.password' type='password' placeholder='请输入密码...'></t-input>
    </t-form-item>
</t-form>

export default {
    data () {
        return {
            form: {
                username: '',
                password: ''
            }
        }
    }
}

10、form-item组件

（1）使用说明

用来包裹表单组件的

（2）参数说明

（3）使用示例

<t-form :model='form' :label-width='60px'>
    <t-form-item label='用户名'>
        <t-input v-model='form.username' placeholder='请输入用户名...'></t-input>
    </t-form-item>
     <t-form-item label='密码'>
        <t-input v-model='form.password' type='password' placeholder='请输入密码...'></t-input>
    </t-form-item>
</t-form>

export default {
    data () {
        return {
            form: {
                username: '',
                password: ''
            }
        }
    }
}