sam_zgj-ui v0.1.2

sam-ui

简介

一个好用的的 Vue UI 组件

使用

1. 安装

npm i sam_zgj-ui

2. 全局注册

import SamUI from 'sam_zgj-ui'
Vue.use(SamUI)

3. 按需导入

import SamUI, { Button, Form } from 'sam_zgj-ui'
Vue.use(SamUI, {
  components: [Button, Form]
})

3. 导入样式

import 'sam_zgj-ui/dist/sam-ui.css'

组件

按钮(Button)

-使用组件

<template>
  <div id="app">
      <s-button type="primary" @click="fn"></s-button>
      <s-button plain>提交</s-button>
      <s-button round>提交</s-button>
      <s-button circle icon="s-icon-jiahao1"></s-button>
      <s-button size="medium">提交</s-button>
      <s-button disabled>提交</s-button>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    fn() {
      console.log('点击了');
    }
  }
}
</script>

对话框(Dialog)

-使用组件

<template>
  <div id="app">
      <s-dialog :visible.sync='show' width='400px' top='100px' >
      <template v-slot:title>
        <div>我是标题</div>
      </template>
      内容
      <template v-slot:footer>
        <s-button >按钮</s-button>
      </template>
    </s-dialog>
  </div>
</template>
<script>
export default {
  name: "App",
  data(): {
    return {
      show: false
    }
  }
}
</script>

输入框(Input)

-使用组件

<template>
  <div id="app">
      <s-input placeholder="请输入内容" type="text" name="名字" v-model="username" ></s-input>
      <s-input v-model="search" prefixIcon="s-icon-sousuo" clearable ></s-input>
      <s-input type="password" name="密码" v-model="password" showPassword></s-input>
  </div>
</template>
<script>
export default {
  name: "App",
  data(): {
    return {
      username: '',
      password: '',
      search: ''
    }
  }
}
</script>

切换(Switch)

-使用组件

<template>
  <div id="app">
      <s-switch inactiveText="按年收费" activeText='按月收费'  v-model="active"></s-switch>
      <s-switch inactiveColor="#ff4949" activeColor="#13ce66" v-model="active" @change="change"><s-switch>
      <s-switch v-model="active" name="username" disabled width="10"></s-switch>
  </div>
</template>
<script>
export default {
  name: "App",
  data(): {
    return {
      active: '',
    }
  },
  methods: {
    change(a) {
      console.log(a);
    }
  }
}
</script>

单选框(Radio)

单选框组(RadioGroup) 用于包裹 radio，通过 v-model 指定组内所有的 radio 的 v-model

-使用组件

<template>
  <div id="app">
      <s-radio label="1" v-model="g" name="sex">男</s-radio>
      <s-radio label="2" v-model="g" name="sex">女</s-radio>
      <s-radio-group v-model="g1" @change="c">
        <s-radio label="1"  name="name">sam</s-radio>
        <s-radio label="2"  name="name">jack</s-radio>
      </s-radio-group>
  </div>
</template>
<script>
export default {
  name: "App",
  data(): {
    return {
      g: '1',
      g1: '1'
    }
  },
  methods: {
    c(a) {
      console.log(a);
    }
  }
}
</script>

复选框(Checkbox)

复选框组(CheckboxGroup) 用于包裹多个 checkbox，通过 v-model 指定组内所有的 checkout 的 v-model

-使用组件

<template>
  <div id="app">
      <s-checkbox v-model="active" @change="change">哈哈</s-checkbox> 
      <s-checkbox-group v-model="arr" @change="change" disable>
        <s-checkbox label='1'></s-checkbox>
        <s-checkbox label="2"></s-checkbox>
      </s-checkbox-group>
  </div>
</template>
<script>
export default {
  name: "App",
  data(): {
    return {
      active: false,
      arr: []
    }
  },
  methods: {
    change(a) {
      console.log(a);
    }
  }
}

表单项(Form-item)

表单(Form)

-使用组件

<template>
  <div id="app">
      <s-from :model="obj" :labelWidth='width' :rules="reles" ref="loginFrom">
        <s-from-item :label='g' prop="username">
          <s-input placeholder="请输入内容" v-model="obj.username" clearable></s-input>
        </s-from-item>
        <s-from-item >
          <s-button @click="f">提交</s-button>
        </s-from-item>
      </s-from>
  </div>
</template>
<script>
export default {
  name: "App",
  data(): {
    return {
      obj: {
        username: ''
      },
      width: 200,
      reles: {
        username: [
          { required: true, message: '请输入活动名称' }, 
          { min: 3, max: 5, message: '长度在 3 到 5 个字符'}
        ]
      },
    }
  },
  methods: {
    f() {
      //全局验证
      this.$refs.loginFrom.validate(error => {
        if (error) {
          console.log('校验成功')
        } else {
          console.log('校验失败')
        }
      })
    }
  }
}