在Vue3项目中引入省市区联动插件

news2024/11/27 9:38:34

1. 打开HBuilder X

图1

2. 新建一个空项目

文件->新建->项目->uni-app

填写项目名称：vue3demo

选择项目存放目录：D:/HBuilderProjects

一定要注意vue的版本，当前选择的版本为vue3

图2

点击“创建”之后进入项目界面

图3

其中各文件的作用

（1）pages是存放页面的文件夹

（2）Static是存放图片等资源的文件夹

（3）Manifest.json是项目的配置文件

（4）Pages.json是项目的页面配置文件

3. 下载想要的插件并安装

（1）打开dcloud的插件市场：DCloud 插件市场

（2）搜索并选择想要的插件

图4

（3）点击插件的“下载”按钮

进入插件的详情页

图5

点击“下载插件并导入HBuilderX”，一定要注意插件基于的vue的版本，否则不兼容，

（4）插件安装（如果没有出现这一步，可以跳过）

安装时会提示以下依赖

图6

点击“继续”（如果没有出现这一步，可以跳过）

之后会在浏览器里提示要打开HBuilder X，确认打开后，会在HBuilder X的左下角有下图进行提示

图7

确定安装插件到项目中（如果没有出现这一步，可以跳过）

点击右下角的“安装插件”按钮，Vue3的插件会安装到项目的uni-modules文件夹（会自动创建）中，要经过几个步骤，需要等待一点时间，完成后会出现下图效果。

图8

（5）选择项目进行插件安装

如果前面的（4）步都没有出现如下图的选择项目列表的界面，则从“下载插件并导入HBuilderX”继续点击，重新安装导入一次，直到出现下图为止。

图9

Vue3的插件会安装到项目的uni-modules文件夹（此文件夹会自动创建）中，piaoyi-cityPicker是省市区联动的插件，出现了即表示插件安装成功。

图10

4. 在页面中引入插件

（1）打开省市区联动插件的详情页：data-cityPicker省市区地址选择器(兼容vue3) - DCloud 插件市场

（2）在页面最底下有项目的使用方法

（3）打开项目的index.vue主页页面

页面中分为三部分，分别是template/script/style

图11

（4）将代码粘贴进入index.vue中即可

<template>

    <view>

        <button @tap="open">打开</button>

        <cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible"/>

        <view>{{str}}</view>

    </view></template>

<script>

    import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'

    export default {

        data() {

            return {

                visible: false,

                maskCloseAble: true,

                str: '',

                defaultValue: '420103',

                // defaultValue: ['河北省','唐山市','丰南区'],

                column: 3

            }

        },

        components: {

            cityPicker

        },

        methods: {

            open () {

                this.visible = true

            },

            confirm (val) {

                console.log(val)

                this.str = JSON.stringify(val)

                this.visible = false

            },

            cancel () {

                this.visible = false

            }

        },

        onShareAppMessage(res) {

            if (res.from === 'button') { // 来自页面内分享按钮

                console.log(res.target)

            }

            return {

                title: 'data-cityPicker省市区地址选择器！',

                path: '/pages/cityPicker/cityPicker'

            }

        },

        onShareTimeline(res) {

            if (res.from === 'button') { // 来自页面内分享按钮

                console.log(res.target)

            }

            return {

                title: 'data-cityPicker省市区地址选择器！'

            }

        }

    }</script>

<style lang="scss">

</style>