suomol_ui v0.2.1

suomol_ui

Project setup

npm i suomol_ui

Compiles and hot-reloads for development

在main.js导入
import suomolUI from 'suomol_ui
import 'suomol_ui/dist/suomol_ui.css

Vue.use(suomolUI)

Compiles and minifies for production

使用:

按钮

<template>
  <div id="app">
    <!-- 普通按钮 -->
    <div class="row">
      <sm-button disabled @click="add">默认按钮</sm-button>
      <sm-button disabled type="primary">普通按钮</sm-button>
      <sm-button type="success">成功按钮</sm-button>
      <sm-button type="info">信息按钮</sm-button>
      <sm-button type="warning">警告按钮</sm-button>
      <sm-button type="danger">危险按钮</sm-button>
    </div>
    <!-- //朴素按钮 -->
    <div class="row">
      <sm-button>默认按钮</sm-button>
      <sm-button disabled plain type="primary">普通按钮</sm-button>
      <sm-button plain type="success">成功按钮</sm-button>
      <sm-button plain type="info">信息按钮</sm-button>
      <sm-button plain type="warning">警告按钮</sm-button>
      <sm-button plain type="danger">危险按钮</sm-button>
    </div>
    <!-- 圆形按钮 -->
    <div class="row">
      <sm-button disabled round>默认按钮</sm-button>
      <sm-button disabled round plain type="primary">普通按钮</sm-button>
      <sm-button round plain type="success">成功按钮</sm-button>
      <sm-button round plain type="info">信息按钮</sm-button>
      <sm-button round plain type="warning">警告按钮</sm-button>
      <sm-button round plain type="danger">危险按钮</sm-button>
    </div>
    <!-- 图片按钮 -->
    <div class="row">
      <sm-button circle>拆</sm-button>
      <sm-button disabled circle plain type="primary">拆</sm-button>
      <sm-button circle icon="sm-icon-check" plain type="success"></sm-button>
      <sm-button circle plain type="info">拆</sm-button>
      <sm-button circle plain type="warning">拆</sm-button>
      <sm-button circle plain type="danger">拆</sm-button>
    </div>

    <div class="row">
      <sm-button type="text" @click="open_to_change"
        >点击显示dialog组件</sm-button
      >
      <sm-dialog title="这是dialog组件" :visible.sync="visible">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
        <template v-slot:footer>
          <sm-button @click="visible = false" type="primary">确定</sm-button>
          <sm-button @click="visible = false">取消</sm-button>
        </template>
      </sm-dialog>
      <!-- 具名插槽用法 v-slot指定插入特定插槽-->
      <!-- <sm-dialog :visible.sync="visible">
        <template v-slot:title>
          <h3>你好</h3>
        </template>
      </sm-dialog> -->
    </div>

    <div class="row">
      <sm-input
        clearable
        showPassword
        name="password"
        v-model="username"
        placeholder="请输入文字"
        type="password"
      ></sm-input>
    </div>
    <div class="row">
      <sm-switch
        v-model="value"
        active-color="red"
        noactive-color="green"
        name="get"
      ></sm-switch>
    </div>
    <div class="row">
      <sm-radio label="1" v-model="gender">男</sm-radio>
      <sm-radio label="2" v-model="gender">女</sm-radio>
    </div>

    <div class="row">
      <sm-radio-group v-model="gender">
        <sm-radio label="1">男</sm-radio>
        <sm-radio label="2">女</sm-radio>
      </sm-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      username: "",
      value: false,
      gender: "1",
    };
  },
  methods: {
    open_to_change() {
      this.visible = true;
    },
    add() {
      console.log(111);
    },
  },
};
</script>

<style lang="scss" scoped>
.row {
  margin-bottom: 20px;
  .sm-button {
    margin-left: 20px;
  }
}
</style>

Customize configuration

See Configuration Reference.