xinyu-ui v0.1.1

xinyu-ui

简介

一个支持拟态风格的 Vue UI 组件

使用

1. 安装

npm i xinyu-ui

2. 全局注册

import XinyuUI from 'XinyuUI'
Vue.use(XinyuUI)

3. 导入样式

import 'xinyu-ui/dist/xinyu-ui.css'

组件

按钮(Button)

1.使用type、plain、disabled,round和circle属性来定义 Button 的样式

<xy-button type="primary" >这是一个dialog</xy-button>
<xy-button type="primary" disabled>这是一个dialog</xy-button>

对话框(Dialog)

1.Dialog 弹出一个对话框，适合需要定制性更大的场景

<xy-button type="primary" @click="visiable=true" >这是一个dialog</xy-button>
 <xy-Dialog :visiable.sync="visiable" title="表单"  width="30%">
    <xy-Form :model="form" >
      <xy-FormItem label="账号">
       <xy-Input  placeholder="请输入账号"  v-model="form.name" />
      </xy-FormItem>
      <xy-FormItem label="密码">
       <xy-Input  type="password"   placeholder="请输入密码" v-model="form.password" />
      </xy-FormItem>
    </xy-Form>
    <div slot="footer" >
    <xy-button type="primary"  @click="visiable = false" >确定</xy-button>
    <xy-button @click="visiable = false" > 取消 </xy-button>
    </div>
 </xy-Dialog>


<script>
export default {
    data(){
        return{
            visiable:false,
            form:{
                name:'',
                password:''}
        }
    },
}
</script>

输入框(Input)

1.通过鼠标或键盘输入字符

账号:<xy-Input  v-model="input" placeholder="请输入账号 "  clearable />
<br>
密码:<xy-Input  type="password"  v-model="password" showPassword  placeholder="请输入密码 "/ >
<br>
    
<script>
    data(){
      return{
          input:'',
          password:''
        }
     }
</script>

切换(Switch)

1.表示两种相互对立的状态间的切换，多用于触发「开/关」。

<xy-Switch   v-model="switch1"  active-text="按月21付费" inactive-text="按年3付费"  >
    </xy-Switch>
    <br>
    <xy-Switch v-model="switch2"  active-color="blue" inactive-color="yellow"  active-text="按月付费">
</xy-Switch>
        
   <script>
       data(){
         return{
              switch1:false,
              switch2:false}
        }
    </script>

单选框(Radio)

1.在一组备选项中进行单选

<xy-radio v-model="radio" label='1' color="red" >备选项1</xy-radio>
<xy-radio v-model="radio" label="2">备选项2</xy-radio> 

   <script>
       data(){
         return{
            radio:1  
         }
        }
    </script>

单选框组(RadioGroup)

1.在一组备选项中进行单选

<xy-radiogroup v-model="radio">
       <xy-radio  label='1' >备选项1</xy-radio>
       <xy-radio  label="2" >备选项2</xy-radio>
       <xy-radio  label="3" >备选项3</xy-radio>
       <xy-radio  label="4" >备选项4</xy-radio>
       <xy-radio  label="5" >备选项5</xy-radio>
</xy-radiogroup>

   <script>
       data(){
         return{
            radio:1  
         }
        }
    </script>

用于包裹 radio，通过 v-model 指定组内所有的 radio 的 v-model

复选框(Checkbox)

1.一组备选项中进行多选

<xyCheckbox v-model="check" >是否选中</xyCheckbox>

<script>
       data(){
         return{
           check: true,
         }
        }
</script>

复选框组(CheckboxGroup)

1.几个备选项中进行多选

<xy-CheckboxGroup v-model="checkList" >
    <xy-Checkbox label="复选框 A"></xy-Checkbox>
    <xy-Checkbox label="复选框 B"></xy-Checkbox>
    <xy-Checkbox label="复选框 C"></xy-Checkbox>
    <xy-Checkbox label="禁用" disabled></xy-Checkbox>
    <xy-Checkbox label="选中且禁用" disabled></xy-Checkbox>
</xy-CheckboxGroup>

<script>
    data(){
         return{
            checkList: ['选中且禁用','复选框 A'],
         }
    }
</script>

用于包裹多个 checkbox，通过 v-model 指定组内所有的 checkout 的 v-model

表单项(Form-item)

1.表单

<xy-Form :model="form" >
    <xy-FormItem label="账号">
       <xy-Input  placeholder="请输入账号"  v-model="form.name" /> 
    </xy-FormItem>
   <xy-FormItem label="密码">
       <xy-Input  type="password"   placeholder="请输入密码" v-model="form.password" />
    </xy-FormItem>
</xy-Form>

<script>
export default {
    data(){
        return{
            form:{
                name:'',
                password:''}
        }
    },
}
</script>

表单(Form)