|
@@ -1,37 +1,54 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
+ <combox class="combox" :data="linkTypeList" :selected-id="linkopen" @change="onlinkOpenTypeChange"></combox>
|
|
|
<div class="input-wrapper">
|
|
|
- <input
|
|
|
- v-model.trim="hyperlink"
|
|
|
- type="text"
|
|
|
- placeholder="https://"
|
|
|
- @change="onUrlChange()"
|
|
|
- />
|
|
|
+ <input v-model.trim="hyperlink" type="text" placeholder="https://" @change="onUrlChange()" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import Combox from "@/components/shared/Combox";
|
|
|
+
|
|
|
export default {
|
|
|
- props:['link'],
|
|
|
- data(){
|
|
|
+ props: ['link', 'linkOpenType'],
|
|
|
+ components: { Combox },
|
|
|
+ data() {
|
|
|
return {
|
|
|
- hyperlink:this.link
|
|
|
+ hyperlink: this.link,
|
|
|
+ linkopen: this.linkOpenType || 'popup',
|
|
|
+ linkTypeList: [
|
|
|
+ {
|
|
|
+ id: 'popup',
|
|
|
+ name: '弹出层打开'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'newTab',
|
|
|
+ name: '新窗口打开'
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
}
|
|
|
},
|
|
|
- methods:{
|
|
|
+ methods: {
|
|
|
+ onlinkOpenTypeChange(data) {
|
|
|
+ this.linkopen = data.id
|
|
|
+ },
|
|
|
onUrlChange() {
|
|
|
- if (this.hyperlink) {
|
|
|
- if (!/^http(s)?:\/\//.test(this.hyperlink)) {
|
|
|
- this.hyperlink =
|
|
|
- window.location.protocol + "//" + this.hyperlink;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
+ if (this.hyperlink) {
|
|
|
+ if (!/^http(s)?:\/\//.test(this.hyperlink)) {
|
|
|
+ this.hyperlink =
|
|
|
+ window.location.protocol + "//" + this.hyperlink;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
- watch:{
|
|
|
- hyperlink(newVal){
|
|
|
- this.$emit('linkChange',newVal)
|
|
|
+ watch: {
|
|
|
+ hyperlink(newVal) {
|
|
|
+ this.$emit('linkChange', newVal)
|
|
|
+ },
|
|
|
+ linkopen(newVal) {
|
|
|
+ this.$emit('linkOpenType', newVal)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -47,10 +64,12 @@ export default {
|
|
|
height: 36px;
|
|
|
width: 100%;
|
|
|
margin-top: 18px;
|
|
|
+
|
|
|
&:focus-within {
|
|
|
border-color: #0076F6;
|
|
|
}
|
|
|
- > input {
|
|
|
+
|
|
|
+ >input {
|
|
|
border: none;
|
|
|
background: transparent;
|
|
|
outline: none;
|