创建dom类，代替jquery的一些简单操作
This commit is contained in:
zyronon
parent
9f702450bf
commit
343cf59e1d
@ -1 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539708547888" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1476" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M739.584 70.592c-92.224 0-177.792 63.04-228.224 109.568C460.864 133.632 375.36 70.592 283.008 70.592 108.48 70.592 0 176.96 0 348.16 0 492.8 130.688 608.256 131.2 608.64l340.544 328.512c10.432 10.432 24.448 16.256 39.552 16.256s29.056-5.824 39.296-16l341.248-328.64c30.656-29.376 130.752-134.848 130.752-260.544C1022.656 176.96 914.176 70.592 739.584 70.592z" p-id="1477" fill="#eb6276"></path></svg>
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539708547888" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1476" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M739.584 70.592c-92.224 0-177.792 63.04-228.224 109.568C460.864 133.632 375.36 70.592 283.008 70.592 108.48 70.592 0 176.96 0 348.16 0 492.8 130.688 608.256 131.2 608.64l340.544 328.512c10.432 10.432 24.448 16.256 39.552 16.256s29.056-5.824 39.296-16l341.248-328.64c30.656-29.376 130.752-134.848 130.752-260.544C1022.656 176.96 914.176 70.592 739.584 70.592z" p-id="1477" fill="#e73a57"></path></svg>
|
||||
|
Before Width: | Height: | Size: 786 B After Width: | Height: | Size: 786 B |
@ -1,6 +1,6 @@
|
||||
export default {
|
||||
baseUrl: 'http://192.168.0.105/index.php/v1',
|
||||
filePreview:'http://192.168.0.105/static/uploads/',
|
||||
baseUrl: 'http://192.168.0.103/index.php/v1',
|
||||
filePreview:'http://192.168.0.103/static/uploads/',
|
||||
// baseUrl: 'http://192.168.10.164/index.php/v1',
|
||||
// filePreview:'http://192.168.10.164/static/uploads/'
|
||||
// baseUrl: 'http://localhost/index.php/v1',
|
||||
|
||||
@ -1,36 +1,94 @@
|
||||
<template>
|
||||
<div class="Test">
|
||||
<BaseHeader>
|
||||
<template v-slot:center>
|
||||
<span class="f16">申报学校信息</span>
|
||||
</template>
|
||||
</BaseHeader>
|
||||
<div class="content">
|
||||
<div ref="input"
|
||||
class="auto-input"
|
||||
contenteditable
|
||||
@input="changeText">
|
||||
<span contenteditable="false" class="link">test</span>
|
||||
<img src="../assets/img/icon/message/emoji/4.webp" class="emoji">
|
||||
<img src="../assets/img/icon/message/emoji/2.webp" class="emoji">
|
||||
{{ comment }}
|
||||
<img src="../assets/img/icon/message/emoji/3.webp" class="emoji">
|
||||
</div>
|
||||
|
||||
<b-button class="mt1r" @click="call">@</b-button>
|
||||
<b-button class="mt1r" @click="emoji">emoji</b-button>
|
||||
<b-button class="mt1r" @click="get">get</b-button>
|
||||
</div>
|
||||
<Video1
|
||||
:play="true"
|
||||
:video="item"
|
||||
:index="0"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import mp40 from "../assets/video/0.mp4";
|
||||
|
||||
export default {
|
||||
name: "Test",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
comment: '12'
|
||||
comment: '12',
|
||||
item: {
|
||||
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
|
||||
"cover": "https://p11.douyinpic.com/img/tos-cn-p-0015/48e513ae1df94a6cb0e23eabdacfdb64~c5_300x400.webp?from=4257465056_large",
|
||||
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-p-0015/80e3288d63094603beaaf2f0e1568e19_1577426215?from=4257465056_large",
|
||||
"origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/be6a2e67b69646778749e932c6d456b6_1577426215~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459040102120742003404DFC4&biz_tag=feed_cover",
|
||||
video: mp40,
|
||||
"video_data_size": 26829508,
|
||||
"duration": 427780,
|
||||
"desc": "几人到深山探险，发现里面一只动物昆虫都没有，知道原因后都怕了 #看电影",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 381,
|
||||
"comment_count": 20,
|
||||
"download_count": 6,
|
||||
"play_count": 0,
|
||||
"share_count": 2,
|
||||
"forward_count": 0,
|
||||
"collect_count": 3,
|
||||
"sort": 195,
|
||||
"is_top": 0,
|
||||
"city": "",
|
||||
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
|
||||
"create_time": "1630423555",
|
||||
"creator_id": "93864497380",
|
||||
"status": 1,
|
||||
"topics": [
|
||||
{
|
||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
||||
"name": "看电影",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
}
|
||||
],
|
||||
"music": {
|
||||
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
|
||||
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
|
||||
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
|
||||
"title": "@穷电影创作的原声",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
},
|
||||
"author": {
|
||||
"id": "93864497380",
|
||||
"unique_id_modify_time": "1630393144",
|
||||
"unique_id": "dyg141319",
|
||||
"favoriting_count": 0,
|
||||
"avatar": "https://p26.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_1080x1080.jpeg?from=116350172",
|
||||
"city": "",
|
||||
"province": null,
|
||||
"country": "",
|
||||
"location": "",
|
||||
"birthday": "1990-01-01",
|
||||
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
|
||||
"following_count": 0,
|
||||
"follower_count": 0,
|
||||
"aweme_count": 0,
|
||||
"nickname": "穷电影",
|
||||
"phone": "",
|
||||
"sex": "0",
|
||||
"last_login_time": "1630423555",
|
||||
"create_time": "1630423555",
|
||||
"status": 1,
|
||||
"desc": null,
|
||||
"is_private": 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@ -43,7 +101,7 @@ export default {
|
||||
|
||||
},
|
||||
get() {
|
||||
console.log( this.$refs.input)
|
||||
console.log(this.$refs.input)
|
||||
|
||||
},
|
||||
call() {
|
||||
|
||||
@ -1,198 +1,125 @@
|
||||
<template>
|
||||
<div class="play-feedback">
|
||||
<div class="feedback-header">
|
||||
<span> </span>
|
||||
<div class="title">播放反馈</div>
|
||||
<back mode="dark" img="close" @click="cancel"></back>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="notice">请选择要反馈的问题</div>
|
||||
<div class="l-row" @click="falseOther(()=>{this.type1 = true} )">
|
||||
<Check mode="red" :modelValue="type1" @change="falseOther(()=>{this.type1 = true} )"/>
|
||||
<span>网络正常无法播放视频</span>
|
||||
</div>
|
||||
<div class="l-row" @click="falseOther(()=>{this.type2 = true} )">
|
||||
<Check mode="red" :modelValue="type2" @change="falseOther(()=>{this.type2 = true} )"/>
|
||||
<span>视频画面正常没声音</span>
|
||||
</div>
|
||||
<div class="l-row" @click="falseOther(()=>{this.type3 = true} )">
|
||||
<Check mode="red" :modelValue="type3" @change="falseOther(()=>{this.type3 = true} )"/>
|
||||
<span>播放几秒/中途卡信</span>
|
||||
</div>
|
||||
<div class="l-row" @click="falseOther(()=>{this.type4 = true} )">
|
||||
<Check mode="red" :modelValue="type4" @change="falseOther(()=>{this.type4 = true} )"/>
|
||||
<span>画面内容不全</span>
|
||||
</div>
|
||||
<div class="l-row" @click="falseOther(()=>{this.type5 = true} )">
|
||||
<Check mode="red" :modelValue="type5" @change="falseOther(()=>{this.type5 = true} )"/>
|
||||
<span>播放过程中闪退回桌面</span>
|
||||
</div>
|
||||
<div class="l-row" @click="falseOther(()=>{this.type6 = true} )">
|
||||
<Check mode="red" :modelValue="type6" @change="falseOther(()=>{this.type6 = true} )"/>
|
||||
<span>画面模糊不清晰</span>
|
||||
</div>
|
||||
<div class="l-row" @click="falseOther(()=>{this.type7 = true} )">
|
||||
<Check mode="red" :modelValue="type7" @change="falseOther(()=>{this.type7 = true} )"/>
|
||||
<span>视频播放其他问题或建议</span>
|
||||
</div>
|
||||
<div v-if="type7" class="other">
|
||||
<div class="textarea-ctn">
|
||||
<textarea name="" id="" cols="30" rows="10"
|
||||
v-model="desc"
|
||||
placeholder="详输入内容"></textarea>
|
||||
</div>
|
||||
<div class="text-num">{{ desc.length }}/300</div>
|
||||
</div>
|
||||
<b-button type="primary" :disabled="!disabled" @click="submit">提交</b-button>
|
||||
</div>
|
||||
<div class="test" @click="click">
|
||||
<img class="left" src="../assets/img/icon/loved.svg" alt="">
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FromBottomDialog from "../components/dialog/FromBottomDialog";
|
||||
import Check from "../components/Check";
|
||||
import BaseButton from "../components/BaseButton";
|
||||
import Dom from "../utils/dom";
|
||||
|
||||
export default {
|
||||
name: "Test",
|
||||
props: {},
|
||||
components: {
|
||||
BaseButton,
|
||||
FromBottomDialog,
|
||||
Check
|
||||
},
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
showShareDialog: true,
|
||||
type1: false,
|
||||
type2: false,
|
||||
type3: false,
|
||||
type4: false,
|
||||
type5: false,
|
||||
type6: false,
|
||||
type7: false,
|
||||
disabled: false,
|
||||
desc: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabled() {
|
||||
if (this.type7 && this.desc) return true
|
||||
return this.type1 || this.type2 || this.type3 || this.type4 || this.type5 || this.type6
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
falseOther(cb) {
|
||||
this.type1 = false
|
||||
this.type2 = false
|
||||
this.type3 = false
|
||||
this.type4 = false
|
||||
this.type5 = false
|
||||
this.type6 = false
|
||||
this.type7 = false
|
||||
cb()
|
||||
},
|
||||
cancel() {
|
||||
click(e) {
|
||||
let id = 'a' + Date.now()
|
||||
let elWidth = 80
|
||||
let rotate = this.randomNum(0, 1)
|
||||
let template = `<img class="${rotate ? 'left' : 'right'}" id="${id}" src="${require('../assets/img/icon/loved.svg')}" alt="">`
|
||||
let el = new Dom().create(template)
|
||||
el.css({top: e.y - elWidth, left: e.x - elWidth / 2,})
|
||||
new Dom().find('.test').append(el)
|
||||
|
||||
setTimeout(() => {
|
||||
new Dom().find(`#${id}`).remove()
|
||||
}, 1000)
|
||||
},
|
||||
submit() {
|
||||
if (this.disabled) return
|
||||
this.cancel()
|
||||
this.$notice('感谢你的反馈，我们会尽快答复！')
|
||||
randomNum(minNum, maxNum) {
|
||||
switch (arguments.length) {
|
||||
case 1:
|
||||
return parseInt(Math.random() * minNum + 1, 10);
|
||||
case 2:
|
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
<style lang="less">
|
||||
@import "../assets/scss/index";
|
||||
|
||||
.play-feedback {
|
||||
max-height: 49rem;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
color: black;
|
||||
.test {
|
||||
position: fixed;
|
||||
bottom: 5rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.feedback-header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
height: 3rem;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
font-weight: bold;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
@width: 8rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
|
||||
.content {
|
||||
padding: 6rem 1.5rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.notice {
|
||||
font-size: 1.2rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
|
||||
.l-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 5rem;
|
||||
font-size: 1.4rem;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
|
||||
|
||||
.check {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: 1rem;
|
||||
&.left {
|
||||
animation: loveLeft 1.1s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.no-border {
|
||||
border-bottom: none;
|
||||
}
|
||||
&.right {
|
||||
animation: loveRight 1.1s linear;
|
||||
}
|
||||
|
||||
.other {
|
||||
.textarea-ctn {
|
||||
width: 100%;
|
||||
background: #eae8e8;
|
||||
padding: 1.5rem;
|
||||
box-sizing: border-box;
|
||||
margin-top: 1rem;
|
||||
border-radius: 2px;
|
||||
@scale: scale(1.2);
|
||||
@rotate: 10deg;
|
||||
|
||||
|
||||
textarea {
|
||||
font-family: "Microsoft YaHei UI";
|
||||
outline: none;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: black;
|
||||
|
||||
&::placeholder {
|
||||
color: @second-text-color;
|
||||
}
|
||||
@keyframes loveLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(2) rotate(0-@rotate);
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0-@rotate);
|
||||
}
|
||||
15% {
|
||||
opacity: 1;
|
||||
transform: @scale rotate(0-@rotate);
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: @scale rotate(0-@rotate);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-10rem) scale(2) rotate(0-@rotate);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.text-num {
|
||||
margin-top: .8rem;
|
||||
margin-bottom: .8rem;
|
||||
font-size: 1rem;
|
||||
color: @second-text-color;
|
||||
text-align: right;
|
||||
@keyframes loveRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(2) rotate(0+@rotate);
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0+@rotate);
|
||||
}
|
||||
15% {
|
||||
opacity: 1;
|
||||
transform: @scale rotate(0+@rotate);
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: @scale rotate(0+@rotate);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-10rem) scale(2) rotate(0+@rotate);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -290,7 +290,7 @@ export default {
|
||||
{
|
||||
"id": "21c4d0e6-4895-44cf-abae-1ad6d4e51cfe",
|
||||
"posterUrl": "images/20210815/11.png",
|
||||
"videoUrl": mp42,
|
||||
"videoUrl": c,
|
||||
"title": "",
|
||||
"likeNum": "4312856",
|
||||
"commentNum": "14431",
|
||||
|
||||
69
src/utils/dom.js
Normal file
69
src/utils/dom.js
Normal file
@ -0,0 +1,69 @@
|
||||
export default class Dom {
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
find(tag) {
|
||||
let els = document.querySelectorAll(tag)
|
||||
if (els.length) {
|
||||
this.els = els
|
||||
}
|
||||
return this
|
||||
}
|
||||
|
||||
create(template) {
|
||||
let tempNode = document.createElement('div');
|
||||
tempNode.innerHTML = template;
|
||||
this.els = [tempNode.firstChild]
|
||||
return this;
|
||||
}
|
||||
|
||||
append(that) {
|
||||
this.els.forEach(el => {
|
||||
that.els.map(v => {
|
||||
el.appendChild(v)
|
||||
})
|
||||
})
|
||||
return this
|
||||
}
|
||||
|
||||
remove() {
|
||||
this.els.forEach(el => {
|
||||
el.parentNode.removeChild(el)
|
||||
})
|
||||
return this
|
||||
}
|
||||
|
||||
css(style, value = null) {
|
||||
if (!value) {
|
||||
Object.keys(style).map(key => {
|
||||
this.els.map(el => {
|
||||
el.style[key] = this.getStyleValue(key, style[key])
|
||||
})
|
||||
}
|
||||
)
|
||||
} else {
|
||||
this.els.map(el => {
|
||||
el.style[style] = this.getStyleValue(style, value)
|
||||
})
|
||||
}
|
||||
return this
|
||||
}
|
||||
|
||||
getStyleValue(key, value) {
|
||||
let whiteList = [
|
||||
'top',
|
||||
'left',
|
||||
'right',
|
||||
'bottom',
|
||||
]
|
||||
if (whiteList.find(v => v === key)) {
|
||||
if (typeof value === 'number') {
|
||||
return value + 'px'
|
||||
}
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user