hyt-ui v2.0.0

cnpm i hyt-ui -S

使用

在src/main.js
import HYTQfUI from '@/hyt-ui';
Vue.use(HYTQfUI);
import 'hyt-ui/hytui.css';

组件

loading

<div class="hytqfui-loading1" v-if="state">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<script>
export default {
    name: 'hytqfui-loading1',
    props: {
        state: {
            type: Boolean,
            default: false,
        },
    },
}
</script>

按钮

<button :class="['hytqfui-button','hytqfui-button--' + type,'hytqfui-button--normal',]">
<div class="hytqfui-button__content">
    <span class="hytqfui-button__text">{{ content }}</span>
</div>
</button>
<script>
export default {
    name: 'hytqfui-button',
    props: {
        content: {
            type: String,
            required: true,
        },
        type: {
            type: String,
            default: 'primary',
        },
    },
}
</script>

框框

<fieldset>
    <legend>{{ title }}</legend>
    <slot></slot>
</fieldset>
<script>
export default {
    name: 'hytqfui-kuangkuang',
    props: {
        title: {
            type: String,
        },
    },
}
</script>

分页

<div class="page">
    <span v-for="n in total" v-bind:key="n" @click="changePageFn(n)">
        {{ n }}
    </span>
</div>
<script>
export default {
  name: 'hytqfui-page',
  props: {
      total: {
          type: Number,
          required: true,
      },
  },
  methods: {
      changePageFn(n) {
          this.$emit('changePageFn', n)
      },
  },
}
</script>

表格

<table border="1" cellpadding="10" cellspacing="0">
    <thead>
        <tr>
            <th v-for="thItem in columns" :key="thItem">{{ thItem.title }}</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="trItem in data" :key="trItem">
            <td v-for="tdItem in columns" :key="tdItem">{{ trItem[tdItem.key] }}</td>
        </tr>
    </tbody>
</table>
<script>
export default {
    name: 'hytqfui-table',
    props: {
        columns: {
            type: Array,
            required: true,
        },
        data: {
            type: Array,
            required: true,
        },
    },
}
</script>