模塊文件VUE
<template>
? <div v-if="showDialog" class="dialog" @touchmove.prevent>
? ? <div v-if="showDialog" class="back-drop"></div>
? ? <div class="alert" :class="{'alert-active':showDialogActive,'alert-big':big,'alert-middle':middle}" :style="'width:'+width+'px'">
? ? ? <div class="title">
? ? ? ? {{title}}
? ? ? ? <div class="iconfont close" @click="close"></div>
? ? ? </div>
? ? ? <div class="dialog-content">
? ? ? ? <slot></slot>
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
import { setTimeout } from "timers";
export default {
? name: "v-templateCreat",
? props: {
? ? title: {
? ? ? type: String,
? ? ? default: "溫馨提示"
? ? },
? ? cancelText: {
? ? ? type: String,
? ? ? default: "取消"
? ? },
? ? doneText: {
? ? ? type: String,
? ? ? default: "確定"
? ? },
? ? middle:{
? ? ? type:Boolean,
? ? ? default:false
? ? },
? ? big:{
? ? ? type:Boolean,
? ? ? default:false
? ? },
? ? show: {
? ? ? type: Boolean,
? ? ? default: false
? ? },
? ? dismiss: {
? ? ? type: Boolean,
? ? ? default: false
? ? },
? ? width: {
? ? ? default: 498
? ? },
? ? open:Boolean
? },
? data() {
? ? return {
? ? ? showDialog: false,
? ? ? message: "",
? ? ? cancel: false,
? ? ? value: "",
? ? ? templateCreat: false,
? ? ? showDialogActive: false
? ? };
? },
? methods: {
? ? close() {
? ? ? this.showDialogActive = false;
? ? ? this.$emit('update:open', false);
? ? ? setTimeout(() => (this.showDialog = false), 320);
? ? },
? ? openFn(){
? ? ? this.showDialog = true;
? ? ? setTimeout(() => (this.showDialogActive = true));
? ? }
? },
? watch: {
? ? open:function(data){
? ? ? if(data) this.openFn();
? ? ? if(!data) this.close();
? ? },
? ? show: function(data) {
? ? ? this.openFn();
? ? },
? ? dismiss: function() {
? ? ? this.close();
? ? },
? },
? mounted(){
? }
};
</script>
<style lang="scss">
@import "../filters/css/all.css";
.dialog {
? position: fixed;
? top: 0;
? bottom: 0;
? left: 0;
? right: 0;
? width: 100%;
? height: 100%;
? background: rgba(0, 0, 0, 0);
? z-index: 106;
? .iconfont {
? ? float: right;
? ? cursor: pointer;
? ? color: #9b9b9b;
? }
? .back-drop {
? ? position: fixed;
? ? top: 0;
? ? bottom: 0;
? ? left: 0;
? ? right: 0;
? ? width: 100%;
? ? height: 100%;
? ? background: rgba(0, 0, 0, 0.4);
? ? z-index: 106;
? }
? .alert {
? ? width: 498px;
? ? min-height: 260px;
? ? // overflow-y: scroll;
? ? background: #fff;
? ? left: calc(50% - 249px);
? ? top: calc(50% - 280px);
? ? position: fixed;
? ? z-index: -1;
? ? transform: scale(1.23);
? ? opacity: 0;
? ? transition: all 0.32s;
? ? position: relative;
? ? .title {
? ? ? height: 44px;
? ? ? width: 100%;
? ? ? padding: 0 20px;
? ? ? -webkit-box-sizing: border-box;
? ? ? box-sizing: border-box;
? ? ? line-height: 44px;
? ? ? background: #f2f2f2;
? ? ? -webkit-box-align: center;
? ? ? -ms-flex-align: center;
? ? ? align-items: center;
? ? ? font-size: 16px;
? ? }
? ? .message {
? ? ? padding: 18px;
? ? ? min-height: 100px;
? ? ? overflow: auto;
? ? }
? }
? .alert-middle{
? ? width:614px !important;
? ? left:calc(50% - 307px);
? }
? .alert-big{
? ? width:748px !important;
? ? left:calc(50% - 374px);
? }
? .alert-active {
? ? z-index: 9999;
? ? transform: scale(1);
? ? opacity: 1;
? }
}
</style>
////////////////////////////////
使用
import templateCreat from "@/components/templateCreat";
components: {
? ? templateCreat
? },
<!-- 店鋪地址 -->
? ? <templateCreat
? ? ? :open.sync="creatShowTemplate"
? ? ? title="店鋪地址"
? ? ? :width="450"
? ? >
? ? ? <div class="exampleCenten">
? ? ? ? <div class="flex">
? ? ? ? ? <div class="leftTxt">所在地區(qū)</div>
? ? ? ? ? <div class="rightViewImg">
? ? ? ? ? ? <el-cascader
? ? ? ? ? ? ? style="width:310px;height:40px;"
? ? ? ? ? ? ? size="large"
? ? ? ? ? ? ? :options="regionOptions"
? ? ? ? ? ? ? v-model="form.selectedOptions"
? ? ? ? ? ? ? @change="addressChange"
? ? ? ? ? ? ></el-cascader>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="flex">
? ? ? ? ? <div class="leftTxt"></div>
? ? ? ? ? <div class="rightViewImg">
? ? ? ? ? ? <div class="amapsView">
? ? ? ? ? ? ? <div style="padding:0 0 10px;">確認坐標(biāo)，方便到店消費</div>
? ? ? ? ? ? ? <div class="amaps" :style="events?'width:300px;height:240px;':''">
? ? ? ? ? ? ? ? <el-amap
? ? ? ? ? ? ? ? ? ref="map"
? ? ? ? ? ? ? ? ? vid="amapDemo"
? ? ? ? ? ? ? ? ? :amap-manager="amapManager"
? ? ? ? ? ? ? ? ? :center="center"
? ? ? ? ? ? ? ? ? :zoom="zoom"
? ? ? ? ? ? ? ? ? :plugin="plugin"
? ? ? ? ? ? ? ? ? :events="events"
? ? ? ? ? ? ? ? ? class="amap-demo"
? ? ? ? ? ? ? ? ></el-amap>
? ? ? ? ? ? ? ? <div class="amapsSon"></div>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? <div style="padding:10px 0;width:300px;">{{form.address}}</div>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? ? <div class="flex msgboxBtns">
? ? ? ? <el-button type="primary" style="width:100px;border-radius:0;" @click="shopSiteClick">保存</el-button>
? ? ? </div>
? ? </templateCreat>
import VueAMap from "vue-amap";
VueAMap.initAMapApiLoader({
? key: "e1dedc6bdd765d46693986ff7ff969f4",
? plugin: [
? ? "AMap.Autocomplete", //輸入提示插件
? ? "AMap.PlaceSearch", //POI搜索插件
? ? "AMap.Scale", //右下角縮略圖插件 比例尺
? ? "AMap.OverView", //地圖鷹眼插件
? ? "AMap.ToolBar", //地圖工具條
? ? "AMap.MapType", //類別切換控件芬骄，實現(xiàn)默認圖層與衛(wèi)星圖账阻、實施交通圖層之間切換的控制
? ? "AMap.PolyEditor", //編輯 折線多淘太，邊形
? ? "AMap.CircleEditor", //圓形編輯器插件
? ? "AMap.Geolocation" //定位控件，用來獲取和展示用戶主機所在的經(jīng)緯度位置
? ],
? uiVersion: "1.0"
});
let amapManager = new VueAMap.AMapManager();
data() {
? ? let self = this;
? ? return {
amapManager, //地圖
? ? ? regionOptions: regionData,
? ? ? zoom: 12,
? ? ? center: [],
? ? ? getCertificationData: "",
? ? ? uploadActions: "",
? ? ? uploadType: "",
? ? ? initShow: false,
? ? ? ?form：{
address：‘’} //地址
? ? ? plugin: [
? ? ? ? {
? ? ? ? ? pName: "Geolocation",
? ? ? ? ? events: {
? ? ? ? ? ? init(o) {
? ? ? ? ? ? ? if (!self.initShow) {
? ? ? ? ? ? ? ? self.initShow = true;
? ? ? ? ? ? ? ? // o 是高德地圖定位插件實例
? ? ? ? ? ? ? ? o.getCurrentPosition((status, result) => {
? ? ? ? ? ? ? ? ? if (result && result.position) {
? ? ? ? ? ? ? ? ? ? console.log(result);
? ? ? ? ? ? ? ? ? ? self.form.longitude = result.position.lng;
? ? ? ? ? ? ? ? ? ? self.form.latitude = result.position.lat;
? ? ? ? ? ? ? ? ? ? self.center = [self.form.longitude, self.form.latitude];
? ? ? ? ? ? ? ? ? ? self.form.address = result.formattedAddress;
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? ],
? ? ? events: {
? ? ? ? init: o => {
? ? ? ? ? o.getCity(result => {});
? ? ? ? },
? ? ? ? moveend: () => {},
? ? ? ? zoomchange: () => {},
? ? ? ? dragend: e => {
? ? ? ? ? var lgt = this.$refs.map.$$getCenter();
? ? ? ? ? self.form.latitude = lgt[1];
? ? ? ? ? self.form.longitude = lgt[0];
? ? ? ? ? self.asdasdashowswxcasd = false;
? ? ? ? ? self.center = [self.form.longitude, self.form.latitude];
? ? ? ? ? // 這里通過高德 SDK 完成。
? ? ? ? ? var geocoder = new AMap.Geocoder({
? ? ? ? ? ? radius: 1000,
? ? ? ? ? ? extensions: "all"
? ? ? ? ? });
? ? ? ? ? geocoder.getAddress(this.$refs.map.$$getCenter(), function(
? ? ? ? ? ? status,
? ? ? ? ? ? result
? ? ? ? ? ) {
? ? ? ? ? ? if (status === "complete" && result.info === "OK") {
? ? ? ? ? ? ? if (result && result.regeocode) {
? ? ? ? ? ? ? ? self.center = [self.form.longitude, self.form.latitude];
? ? ? ? ? ? ? ? self.form.address = result.regeocode.formattedAddress;
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? });
? ? ? ? }
? ? ? },
}
