轩辕组件库 (Xuanyuan Components)

一个基于 Vue 2.5.2 的轻量级 UI 组件库，可与 Element UI 一起使用。

安装

npm install xuanyuan-components

使用方法

全量引入

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import XuanyuanComponents from 'xuanyuan-components'
import 'xuanyuan-components/styles/index.css'

Vue.use(ElementUI)
Vue.use(XuanyuanComponents)

按需引入

import Vue from 'vue'
import { XButton, XInput, XElSelect } from 'xuanyuan-components'
import 'xuanyuan-components/styles/index.css'

Vue.component(XButton.name, XButton)
Vue.component(XInput.name, XInput)
Vue.component(XElSelect.name, XElSelect)

浏览器直接引入

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://unpkg.com/xuanyuan-components/dist/xuanyuan-components.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/xuanyuan-components/dist/xuanyuan-components.umd.min.js"></script>

组件示例

XButton 按钮

<template>
  <div>
    <x-button @click="handleClick">默认按钮</x-button>
    <x-button type="primary">主要按钮</x-button>
    <x-button type="success" plain>朴素成功按钮</x-button>
    <x-button type="warning" disabled>禁用警告按钮</x-button>
    <x-button type="danger" size="small">小型危险按钮</x-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('按钮被点击了!')
    }
  }
}
</script>

XInput 输入框

<template>
  <div>
    <x-input v-model="inputValue" placeholder="请输入内容"></x-input>
    <p>输入的值: {{ inputValue }}</p>
    
    <x-input 
      v-model="password" 
      type="password" 
      placeholder="请输入密码"
      size="small"
    ></x-input>
  </div>
</template>

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

XCard 卡片

<template>
  <div>
    <x-card class="box-card">
      <div slot="header">
        <span>卡片标题</span>
      </div>
      <div v-for="o in 4" :key="o" class="text item">
        {{ '列表内容 ' + o }}
      </div>
    </x-card>
  </div>
</template>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
  margin-top: 20px;
}
</style>

XElSelect 下拉选择器

<template>
  <div>
    <x-el-select 
      v-model="value" 
      :options="options" 
      placeholder="请选择"
      clearable
    ></x-el-select>
    <p>选中的值: {{ value }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' },
        { value: '3', label: '选项3' }
      ]
    }
  }
}
</script>

XElTable 表格

<template>
  <div>
    <x-el-table 
      :data="tableData" 
      style="width: 100%" 
      border
    >
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </x-el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>

XElForm 表单

<template>
  <div>
    <x-el-form 
      :model="form" 
      :rules="rules" 
      ref="form"
      label-width="100px"
    >
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <x-el-select 
          v-model="form.region" 
          :options="regionOptions"
          placeholder="请选择活动区域">
        </x-el-select>
      </el-form-item>
      <el-form-item>
        <x-button type="primary" @click="submitForm">立即创建</x-button>
        <x-button @click="resetForm">重置</x-button>
      </el-form-item>
    </x-el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      },
      regionOptions: [
        { value: '1', label: '区域一' },
        { value: '2', label: '区域二' }
      ]
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
}
</script>

组件列表

目前包含以下组件：

基础组件：

• XButton: 按钮组件
• XInput: 输入框组件
• XCard: 卡片组件

Element UI 扩展组件：

• XElSelect: 下拉选择器组件（基于 el-select）
• XElTable: 表格组件（基于 el-table）
• XElForm: 表单组件（基于 el-form）

兼容性

• Vue 2.5.2 及以上版本
• Element UI 2.15.0 及以上版本
• 支持与 Element UI 同时使用

许可证

MIT