import { Dialog } from 'vant' import { showDialog } from 'vant' import { VueCropper } from 'vue-cropper' defineOptions({ @@ -52,7 +52,7 @@ useHead({ title: 'Avatar Detail', }) Dialog.alert({ showDialog({ title: '标题', message: '弹出的内容', }).then(() => { 19 changes...
我是这样写的
importVuefrom'vue';importVantfrom'vant';import'vant/lib/index.css'; Vue.use(Vant); 这种写法经过 webpack 构建之后会将组件库产出的vant.min.js、index.css引入并打包至构建产物中,而引入的vant.min.js文件是包含组件库全部组件的 js 部分,index.css包含全部组件的 css 部分。因此,这会导致构建打包产物增...
在开发项目过程中,通常会用到很多功能和设计相类似的组件,toast 和 dialog 组件基本是每一个移动端项目都会用到的。为了更好匹配自己公司的 UI 设计风格,我们没有直接用 vant 的 toast 和 dialog 组件,而是自己封装了类似的组件,可供直接调用,如: this.$toast({ msg: '手机号码不能为空' }) this.$toast(...
...js代码: import hDialogBack from '...发布到npm 如果组件需要被其他人引用,最好使用commonjs2规范,webapck如下配置: output: { path: '.../dist', filename: '[name].js', library: 'vue-hdialog', libraryTarget: 'commonjs2' } 在npmjs上注册一个账号利用npm...package.json中的main节点是指定...
export default defineConfig({ plugins: [ AutoImport({ resolvers: [VantResolver()], imports: [ 'vue', 'vue-router', // VantImports 返回一个数组,包含所有的 vant api,即 ['showDialog', 'closeDialog', ..., 'resetToastDefaultOptions'] { 'vant/es': VantImports() } ] }), vue() ] ...