总览

Button组件

<template>
  <div class="basic block">
    <open-button> Default </open-button>
    <open-button type="primary"> Primary </open-button>
    <open-button type="info"> Info </open-button>
    <open-button type="success"> Success </open-button>
    <open-button type="warning"> Warning </open-button>
    <open-button type="danger"> Danger </open-button>
  </div>

  <div class="plain block">
    <open-button plain> Plain </open-button>
    <open-button type="primary" plain> Primary </open-button>
    <open-button type="info" plain> Info </open-button>
    <open-button type="success" plain> Success </open-button>
    <open-button type="warning" plain> Warning </open-button>
    <open-button type="danger" plain> Danger </open-button>
  </div>

  <div class="round block">
    <open-button round> Round </open-button>
    <open-button type="primary" round> Primary </open-button>
    <open-button type="info" round> Info </open-button>
    <open-button type="success" round> Success </open-button>
    <open-button type="warning" round> Warning </open-button>
    <open-button type="danger" round> Danger </open-button>
  </div>

  <div class="circle block">
    <open-button circle :icon="Search" />
    <open-button type="primary" circle :icon="Share" />
    <open-button type="success" circle :icon="Delete" />
    <open-button type="warning" circle :icon="Star" />
    <open-button type="danger" circle :icon="Close" />
    <open-button type="info" circle :icon="Monitor" />
  </div>
</template>
<script setup>
import OpenButton from '@open-design/components/button';
import { Close, Delete, Monitor, Search, Share, Star } from '@element-plus/icons-vue';
</script>
<style>
.block {
  margin-bottom: 10px;
}
</style>

Input组件

<template>
  <open-input v-model="input" style="width: 240px" placeholder="Please input" />
</template>

<script setup lang="ts">
import OpenInput from '@open-design/components/input';
import { ref } from 'vue';

const input = ref('');
</script>

Message组件

<template>
  <open-button plain @click="open1">Success</open-button>
  <open-button plain @click="open2">Warning</open-button>
  <open-button plain @click="open3">Message</open-button>
  <open-button plain @click="open4">Error</open-button>
</template>

<script setup lang="ts">
import createMessage from '@open-design/components/message';
import OpenButton from '@open-design/components/button';

const open1 = () => {
  createMessage({
    message: 'This is a message.',
    type: 'success'
  });
};

const open2 = () => {
  createMessage({
    message: 'This is a message.',
    type: 'warning'
  });
};
const open3 = () => {
  createMessage({
    message: 'This is a message.',
    type: 'info'
  });
};
const open4 = () => {
  createMessage({
    message: 'This is a message.',
    type: 'danger'
  });
};
</script>

Switch组件

<template>
  <open-switch v-model="value1" />
  <open-switch v-model="value1" on-color="#13ce66" off-color="#ff4949" style="margin-left: 4px" />
</template>

<script setup lang="ts">
import OpenSwitch from '@open-design/components/switch';
import { ref } from 'vue';

const value1 = ref(true);
</script>

Tooltip组件

<template>
  <div class="tool-tip-base-box">
    <div class="row center">
      <open-tool-tip
        class="box-item"
        effect="light"
        content="Top Left prompts info"
        placement="top"
      >
        <open-button>top</open-button>
      </open-tool-tip>
      <open-tool-tip
        class="box-item"
        effect="light"
        content="Top Center prompts info"
        placement="bottom"
      >
        <open-button>bottom</open-button>
      </open-tool-tip>
      <open-tool-tip
        class="box-item"
        effect="light"
        content="Top Right prompts info"
        placement="top-end"
      >
        <open-button>top-end</open-button>
      </open-tool-tip>
    </div>
  </div>
</template>
<script lang="ts" setup>
import OpenToolTip from '@open-design/components/tooltip';
import OpenButton from '@open-design/components/button';
</script>
<style scoped></style>

Dropdown组件

<template>
  <open-dropdown :menu-options="menuOptions" trigger="click">
    <open-button
      >Dropdown List
      <open-icon><ArrowDown /></open-icon>
    </open-button>
  </open-dropdown>
  <open-dropdown :menu-options="menuOptions" trigger="click" split-button type="primary">
    Dropdown List
  </open-dropdown>
</template>

<script setup lang="ts">
import OpenDropdown from '@open-design/components/dropdown';
import OpenButton from '@open-design/components/button';
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
import OpenIcon from '@open-design/components/icon';
import eldropdown from 'element-plus';

const menuOptions = [
  {
    label: 'Action 1',
    key: 1,
    disabled: true
  },
  {
    label: 'Action 2',
    key: 2,
    divided: true
  },
  {
    label: 'Action 3',
    key: 3
  },
  {
    label: 'Action 4',
    key: 4
  }
];
</script>

Select组件

<template>
  <open-select
    placeholder="Select"
    :options="options"
    v-model="selectValue"
    :suffix-icon="ArrowDown"
    clearable
  />
</template>

<script setup lang="ts">
import OpenSelect from '@open-design/components/select';
import { ref } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';

const selectValue = ref('');

const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4',
    disabled: true
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
];
</script>

Collapse组件

Consistency

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Feedback

Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;

<template>
  <open-collapse v-model="activeNames" @change="handleChange">
    <open-collapse-item title="Consistency" name="1">
      <div>
        Consistent with real life: in line with the process and logic of real life, and comply with
        languages and habits that the users are used to;
      </div>
    </open-collapse-item>
    <open-collapse-item title="Feedback" name="2">
      <div>
        Operation feedback: enable the users to clearly perceive their operations by style updates
        and interactive effects;
      </div>
    </open-collapse-item>
  </open-collapse>
</template>

<script setup lang="ts">
import OpenCollapse, { CollapseItem as OpenCollapseItem } from '@open-design/components/collapse';
import { ref } from 'vue';

const activeNames = ref(['1']);
const handleChange = (val: string[]) => {
  console.log(val);
};
</script>

Form组件

Activity name

Activity region

<template>
  <open-form :model="form" :rules="rules" style="width: 600px">
    <open-form-item label="Activity name" show-message prop="name">
      <open-input id="name" v-model="form.name" />
    </open-form-item>
    <open-form-item label="Activity region" show-message prop="region">
      <open-select v-model="form.region" placeholder="Select" :options="options" />
    </open-form-item>
  </open-form>
</template>

<script setup lang="ts">
import OpenInput from '@open-design/components/input';
import { FormItem as OpenFormItem, Form as OpenForm } from '@open-design/components/form';
import { reactive } from 'vue';
import OpenSelect from '@open-design/components/select';

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
});

const options = [
  {
    value: 'Option1',
    label: 'Option1',
    disabled: true
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
];

const rules = reactive({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ],
  region: [{ required: true, message: 'Please input Activity region', trigger: 'blur' }]
});
</script>

<style scoped></style>