How to use ant-design-vue - 10 common examples

To help you get started, we’ve selected a few ant-design-vue examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github yanghuayi / vue-ts-admin / src / components / Layout / AppMain.tsx View on Github external
import {
  Component, Prop, Emit, Vue, Watch, Provide,
} from 'vue-property-decorator';
import { Tabs } from 'ant-design-vue';
import config from '@/utils/config';
import { menuItem } from '@/interface';

import Header from '@/components/Layout/Header/Header';
import Sidebar from '@/components/Layout/Sidebar/Sidebar';
import './AppMain.less';

@Component({
  components: {
    'a-tabs': Tabs,
    'a-tab-pane': Tabs.TabPane,
  },
})
export default class AppMain extends Vue {
  @Prop() private menuData!: menuItem[];

  // data
  onTabs: any = '1';

  @Watch('$route', { immediate: true, deep: true })
  routeChange(to: any, from: any) {
    this.$store.dispatch('AddTabPane', to.path);
  }

  @Emit()
  removeTab(name: string) {
    console.log(this);
github didin1453fatih / dbdesigner.id / src / store / Account / action.js View on Github external
logoutAccount: request2(async context => {
    // context.commit("setLoadingChangePassword", true);
    context.rootCommit("GlobalLoading/setVisible", true);
    try {
      await requestHelper(Logout);
      message.success("Logout", 2);
      context.rootCommit("GlobalLoading/setVisible", false);
      setTimeout(() => {
        window.location.href = "/";
      }, 500);
    } catch (error) {
      if (error.code === 10) {
        message.error("Login first to logout", 2);
        context.rootCommit("LeftPanel/setVisible", true);
        context.rootCommit("LeftPanel/setPanelName", "login");
      } else {
        message.error(error.message, 2);
      }
      context.rootCommit("GlobalLoading/setVisible", false);
    }
  })
};
github ruyangit / admin-workbench-ui / src / views / Login.vue View on Github external
<script>
import { Form, Button, Checkbox, Input, Icon } from "ant-design-vue";

const NormalLoginForm = {
  components: {
    AForm: Form,
    AFormItem: Form.Item,
    AButton: Button,
    ACheckbox: Checkbox,
    AInput: Input,
    AIcon: Icon
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      // this.form.validateFields((err, values) => {
      //   if (!err) {
      //   }
      // });
    }
  },

  render() {
github xiaozhu188 / electron-vue-cloud-music / src / renderer / store / modules / User.js View on Github external
async subscribePlatlist ({commit, state}, {t, playlist}) {
    let pid = playlist.id
    let res = await likePlaylist(t, pid)
    if (res.code === 200) {
      let userPlaylists = state.userPlaylists.slice()
      if (t === 1) {
        Message.success('收藏成功!')
        playlist.subscribed = true
        userPlaylists.unshift(playlist)
      } else if (t === 2) {
        Message.success('取消收藏成功!')
        let index = userPlaylists.findIndex(item => item.id === pid)
        userPlaylists.splice(index, 1)
      }
      commit('SET_USER_PLAYLISTS', userPlaylists)
    }
  },
  // 取消收藏歌单
github xiaozhu188 / electron-vue-cloud-music / src / renderer / store / modules / User.js View on Github external
async subscribePlatlist ({commit, state}, {t, playlist}) {
    let pid = playlist.id
    let res = await likePlaylist(t, pid)
    if (res.code === 200) {
      let userPlaylists = state.userPlaylists.slice()
      if (t === 1) {
        Message.success('收藏成功!')
        playlist.subscribed = true
        userPlaylists.unshift(playlist)
      } else if (t === 2) {
        Message.success('取消收藏成功!')
        let index = userPlaylists.findIndex(item => item.id === pid)
        userPlaylists.splice(index, 1)
      }
      commit('SET_USER_PLAYLISTS', userPlaylists)
    }
  },
  // 取消收藏歌单
github xiaozhu188 / electron-vue-cloud-music / src / renderer / store / modules / User.js View on Github external
async removePlaylist ({commit, state}, {action, pid}) {
    let res = await likePlaylist(action, pid)
    if (res.code === 200) {
      let userPlaylists = state.userPlaylists.slice()
      let index = userPlaylists.findIndex(item => item.id === pid)
      userPlaylists.splice(index, 1)
      commit('SET_USER_PLAYLISTS', userPlaylists)
      Message.success('删除成功!')
    }
  },
  // 删除创建的歌单
github apache / submarine / submarine-workbench / workbench-web / src / components / Table / index.js View on Github external
render () {
    const props = {}
    const localKeys = Object.keys(this.$data)
    const showAlert = (typeof this.alert === 'object' && this.alert !== null && this.alert.show) && typeof this.rowSelection.selectedRowKeys !== 'undefined' || this.alert

    Object.keys(T.props).forEach(k => {
      const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`
      if (localKeys.includes(localKey)) {
        props[k] = this[localKey]
        return props[k]
      }
      if (k === 'rowSelection') {
        if (showAlert && this.rowSelection) {
          // 如果需要使用alert,则重新绑定 rowSelection 事件
          console.log('this.rowSelection', this.rowSelection)
          props[k] = {
            ...this.rowSelection,
            selectedRows: this.selectedRows,
            selectedRowKeys: this.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
              this.updateSelect(selectedRowKeys, selectedRows)
              typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows)
github ruyangit / admin-workbench-ui / src / utils / request.js View on Github external
//     confirmButtonText: '重新登录',
                //     cancelButtonText: '取消',
                //     type: 'warning'
                // }).then(() => {
                //     removeCookies(_CONST.TOKEN);
                //     location.reload();// 为了重新实例化vue-router对象 避免bug
                // })
            } else {
                let error;
                if (!error) {
                    error = "请求失败,异常: " + res.statusText + ' [' + res.status + ']';
                }
                message.error(error, 5);
            }
        } else {
            message.error("请求失败," + error, 5);
        }
        return Promise.reject(error)
    })
github luoyang125024608 / electron-vue-anyproxy / src / renderer / pages / rule / rule-edit.vue View on Github external
function generateUUIDv4 () {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      var r = Math.random() * 16 | 0
      var v = c === 'x' ? r : (r & 0x3 | 0x8)
      return v.toString(16)
    })
  }

  export default {
    components: {
      codemirror,
      [Form.name]: Form,
      [Input.name]: Input,
      [Select.name]: Select,
      [Select.Option.name]: Select.Option,
      [Form.Item.name]: Form.Item
    },
    name: 'rule-edit',
    data () {
      return {
        ruleKey: { // 样例的id和name列表
          id: '',
          enable: false,
          name: ''
        },
        ruleName: '', // 样例规则的名称
        ruleValue: '', // 样例的代码字符串
        ruleOptions,
        mode: 'add',
        formItemLayout: {
          labelCol: { span: 4 },
          wrapperCol: { span: 16 }
github zhangdaiscott / jeecg-boot / ant-design-vue-jeecg / src / utils / request.js View on Github external
Vue.ls.remove(ACCESS_TOKEN)
                window.location.reload()
              })
            }
          })
          // update-end- --- author:scott ------ date:20190225 ---- for:Token失效采用弹框模式,不直接跳转----
        }
        break
      case 404:
          notification.error({ message: '系统提示', description:'很抱歉,资源未找到!',duration: 4})
        break
      case 504:
        notification.error({ message: '系统提示', description: '网络超时'})
        break
      case 401:
        notification.error({ message: '系统提示', description:'未授权,请重新登录',duration: 4})
        if (token) {
          store.dispatch('Logout').then(() => {
            setTimeout(() => {
              window.location.reload()
            }, 1500)
          })
        }
        break
      default:
        notification.error({
          message: '系统提示',
          description: data.message,
          duration: 4
        })
        break
    }