Commit 0bda5f28 by yanju

动态发布页面

parent 76206a1b
let emojiArrs = {
emojiArr1 : ["😁","😂","😃","😄","😅","😆","😉","😊","😋","😌","😍","😏","😒","😓","😔","😖","😘","😚","😜","😝","😞","😠","😡","😢","😣","😤","😥","😨","😩","😪","😫","😭","😰","😱","😲","😳","😵","😷","😸","😹","😺","😻","😼","😽","😾","😿","🙀","🙅","🙆","🙇","🙈","🙉","🙊","🙋","🙌","🙍","🙎","🙏"],
emojiArr2 : ["✂","✅","✈","✉","✊","✋","✌","✏","✒","✔","✖","✨","✳","✴","❄","❇","❌","❎","❓","❔","❕","❗","❤","➕","➖","➗","➡","➰","🚀","🚃","🚄","🚅","🚇","🚉","🚌","🚏","🚑","🚒","🚓","🚕","🚗","🚙","🚚","🚢","🚤","🚥","🚧","🚨","🚩","🚪","🚫","🚬","🚭","🚲","🚶","🚹","🚺","🚻","🚼","🚽","🚾","🛀"],
emojiArr3 : ["Ⓜ","🅰","🅱","🅾","🅿","🆎","🆑","🆒","🆓","🆔","🆕","🆖","🆗","🆘","🆙","🆚","🇩🇪","🇬🇧","🇨🇳","🇯🇵","🇫🇷","🇰🇷","🇪🇸","🇮🇹","🇷🇺","🇺🇸","🈁","🈂","🈚","🈯","🈲","🈳","🈴","🈵","🈶","🈷","🈸","🈹","🈺","🉐","🉑"],
emojiArr4 : ["©","®","‼","⁉","#⃣","8⃣","9⃣","7⃣","0⃣","6⃣","5⃣","4⃣","3⃣","2⃣","1⃣","™","ℹ","↔","↕","↖","↗","↘","↙","↩","↪","⌚","⌛","⏩","⏪","⏫","⏬","⏰","⏳","▪","▫","▶","◀","◻","◼","◽","◾","☀","☁","☎","☑","☔","☕","☝","☺","♈","♉","♊","♋","♌","♍","♎","♏","♐","♑","♒","♓","♠","♣","♥","♦","♨","♻","♿","⚓","⚠","⚡","⚪","⚫","⚽","⚾","⛄","⛅","⛎","⛔","⛪","⛲","⛳","⛵","⛺","⛽","⤴","⤵","⬅","⬆","⬇","⬛","⬜","⭐","⭕","〰","〽","㊗","㊙","🀄","🃏","🌀","🌁","🌂","🌃","🌄","🌅","🌆","🌇","🌈","🌉","🌊","🌋","🌌","🌏","🌑","🌓","🌔","🌕","🌙","🌛","🌟","🌠","🌰","🌱","🌴","🌵","🌷","🌸","🌹","🌺","🌻","🌼","🌽","🌾","🌿","🍀","🍁","🍂","🍃","🍄","🍅","🍆","🍇","🍈","🍉","🍊","🍌","🍍","🍎","🍏","🍑","🍒","🍓","🍔","🍕","🍖","🍗","🍘","🍙","🍚","🍛","🍜","🍝","🍞","🍟","🍠","🍡","🍢","🍣","🍤","🍥","🍦","🍧","🍨","🍩","🍪","🍫","🍬","🍭","🍮","🍯","🍰","🍱","🍲","🍳","🍴","🍵","🍶","🍷","🍸","🍹","🍺","🍻","🎀","🎁","🎂","🎃","🎄","🎅","🎆","🎇","🎈","🎉","🎊","🎋","🎌","🎍","🎎","🎏","🎐","🎑","🎒","🎓","🎠","🎡","🎢","🎣","🎤","🎥","🎦","🎧","🎨","🎩","🎪","🎫","🎬","🎭","🎮","🎯","🎰","🎱","🎲","🎳","🎴","🎵","🎶","🎷","🎸","🎹","🎺","🎻","🎼","🎽","🎾","🎿","🏀","🏁","🏂","🏃","🏄","🏆","🏈","🏊","🏠","🏡","🏢","🏣","🏥","🏦","🏧","🏨","🏩","🏪","🏫","🏬","🏭","🏮","🏯","🏰","🐌","🐍","🐎","🐑","🐒","🐔","🐗","🐘","🐙","🐚","🐛","🐜","🐝","🐞","🐟","🐠","🐡","🐢","🐣","🐤","🐥","🐦","🐧","🐨","🐩","🐫","🐬","🐭","🐮","🐯","🐰","🐱","🐲","🐳","🐴","🐵","🐶","🐷","🐸","🐹","🐺","🐻","🐼","🐽","🐾","👀","👂","👃","👄","👅","👆","👇","👈","👉","👊","👋","👌","👍","👎","👏","👐","👑","👒","👓","👔","👕","👖","👗","👘","👙","👚","👛","👜","👝","👞","👟","👠","👡","👢","👣","👤","👦","👧","👨","👩","👪","👫","👮","👯","👰","👱","👲","👳","👴","👵","👶","👷","👸","👹","👺","👻","👼","👽","👾","👿","💀","💁","💂","💃","💄","💅","💆","💇","💈","💉","💊","💋","💌","💍","💎","💏","💐","💑","💒","💓","💔","💕","💖","💗","💘","💙","💚","💛","💜","💝","💞","💟","💠","💡","💢","💣","💤","💥","💦","💧","💨","💩","💪","💫","💬","💮","💯","💰","💱","💲","💳","💴","💵","💸","💹","💺","💻","💼","💽","💾","💿","📀","📁","📂","📃","📄","📅","📆","📇","📈","📉","📊","📋","📌","📍","📎","📏","📐","📑","📒","📓","📔","📕","📖","📗","📘","📙","📚","📛","📜","📝","📞","📟","📠","📡","📢","📣","📤","📥","📦","📧","📨","📩","📪","📫","📮","📰","📱","📲","📳","📴","📶","📷","📹","📺","📻","📼","🔃","🔊","🔋","🔌","🔍","🔎","🔏","🔐","🔑","🔒","🔓","🔔","🔖","🔗","🔘","🔙","🔚","🔛","🔜","🔝","🔞","🔟","🔠","🔡","🔢","🔣","🔤","🔥","🔦","🔧","🔨","🔩","🔪","🔫","🔮","🔯","🔰","🔱","🔲","🔳","🔴","🔵","🔶","🔷","🔸","🔹","🔺","🔻","🔼","🔽","🕐","🕑","🕒","🕓","🕔","🕕","🕖","🕗","🕘","🕙","🕚","🕛","🗻","🗼","🗽","🗾","🗿"],
emojiArr5 : ["😀","😇","😈","😎","😐","😑","😕","😗","😙","😛","😟","😦","😧","😬","😮","😯","😴","😶"],
emojiArr6 : ["🚁","🚂","🚆","🚈","🚊","🚍","🚎","🚐","🚔","🚖","🚘","🚛","🚜","🚝","🚞","🚟","🚠","🚡","🚣","🚦","🚮","🚯","🚰","🚱","🚳","🚴","🚵","🚷","🚸","🚿","🛁","🛂","🛃","🛄","🛅"],
emojiArr7 : ["🌍","🌎","🌐","🌒","🌖","🌗","🌘","🌚","🌜","🌝","🌞","🌲","🌳","🍋","🍐","🍼","🏇","🏉","🏤","🐀","🐁","🐂","🐃","🐄","🐅","🐆","🐇","🐈","🐉","🐊","🐋","🐏","🐐","🐓","🐕","🐖","🐪","👥","👬","👭","💭","💶","💷","📬","📭","📯","📵","🔀","🔁","🔂","🔄","🔅","🔆","🔇","🔉","🔕","🔬","🔭","🕜","🕝","🕞","🕟","🕠","🕡","🕢","🕣","🕤","🕥","🕦","🕧"],
};
export default emojiArrs
No preview for this file type
...@@ -6,6 +6,20 @@ ...@@ -6,6 +6,20 @@
"description": "", "description": "",
"glyphs": [ "glyphs": [
{ {
"icon_id": "13453039",
"name": "ellipsis",
"font_class": "icon-yun--menu2",
"unicode": "e62e",
"unicode_decimal": 58926
},
{
"icon_id": "13453030",
"name": "arrow-back",
"font_class": "yun-icon--arrow-back",
"unicode": "e62d",
"unicode_decimal": 58925
},
{
"icon_id": "13437403", "icon_id": "13437403",
"name": "yun-icon-down_arrow2", "name": "yun-icon-down_arrow2",
"font_class": "yun-icon--down_arrow2", "font_class": "yun-icon--down_arrow2",
......
...@@ -20,6 +20,12 @@ Created by iconfont ...@@ -20,6 +20,12 @@ Created by iconfont
/> />
<missing-glyph /> <missing-glyph />
<glyph glyph-name="icon-yun--menu2" unicode="&#58926;" d="M512 668.444444a113.777778 113.777778 0 1 1-113.777778 113.777778 113.777778 113.777778 0 0 1 113.777778-113.777778z m0-568.888888a113.777778 113.777778 0 1 1 113.777778-113.777778 113.777778 113.777778 0 0 1-113.777778 113.777778z m0 398.222222a113.777778 113.777778 0 1 1 113.777778-113.777778 113.777778 113.777778 0 0 1-113.777778 113.777778z" horiz-adv-x="1024" />
<glyph glyph-name="yun-icon--arrow-back" unicode="&#58925;" d="M935.562281 469.196823H289.715928l280.675975 279.582432A85.405689 85.405689 0 1 1 449.555428 869.469924L24.240198 444.555659a87.775032 87.775032 0 0 1 0-120.690669L449.701234-101.01282300000003a85.369238 85.369238 0 1 1 120.836474 120.508412l-280.675974 279.582432h645.700547a85.004724 85.004724 0 1 1 0 169.972996z" horiz-adv-x="1025" />
<glyph glyph-name="yun-icon--down_arrow2" unicode="&#58924;" d="M1024-128L0 896h2048z" horiz-adv-x="2048" /> <glyph glyph-name="yun-icon--down_arrow2" unicode="&#58924;" d="M1024-128L0 896h2048z" horiz-adv-x="2048" />
......
No preview for this file type
...@@ -84,6 +84,8 @@ table { ...@@ -84,6 +84,8 @@ table {
border-spacing: 0 border-spacing: 0
} }
body, html { body, html {
font-size:1px; font-size:1px;
max-width:750px; max-width:750px;
margin:0 auto; margin:0 auto;
......
...@@ -100,6 +100,7 @@ tag: yun-input ...@@ -100,6 +100,7 @@ tag: yun-input
|leftWord|左边嵌入的文字|String|-|-| |leftWord|左边嵌入的文字|String|-|-|
|bgColorV|背景颜色|String|-|-| |bgColorV|背景颜色|String|-|-|
|showIcon|是否展示搜索icon|Boolean|true|-| |showIcon|是否展示搜索icon|Boolean|true|-|
|showClose|是否展示关闭icon|Boolean|false|-|
|placeholder|placeholder|String|-|-| |placeholder|placeholder|String|-|-|
|validate|正则数组|Array|-|示例:[ {regex:/^[0-9]*$/,alertWord:'请输入数字!'}]| |validate|正则数组|Array|-|示例:[ {regex:/^[0-9]*$/,alertWord:'请输入数字!'}]|
--- ---
......
...@@ -170,6 +170,8 @@ ...@@ -170,6 +170,8 @@
stylesObject.flexShrink=0; stylesObject.flexShrink=0;
} }
if(this.pointer){ if(this.pointer){
stylesObject.cursor = 'pointer' stylesObject.cursor = 'pointer'
} }
......
import AutoTextarea from './src/main';
AutoTextarea.install = function (Vue) {
Vue.component(AutoTextarea.name,AutoTextarea)
}
export default AutoTextarea
<template>
<div
:style="{fontSize: fontSize*heightRate+'px' , lineHeight: lineHeight*heightRate+'px', height: 'auto'}"
class="auto-textarea-wrapper"
>
<pre
:style="{padding:`0 0`,fontSize: fontSize*heightRate+'px' , lineHeight: lineHeight*heightRate+'px', minHeight: minHeight*heightRate+'px'}"
class="auto-textarea-block">{{temp_value}}
</pre>
<textarea
ref="vTextarea"
:autofocus="s_autofocus"
@keyup="change" spellcheck="false"
:placeholder="placeholder"
v-model="temp_value"
:style="{fontSize: fontSize*heightRate+'px' ,
padding:`0 0`,
lineHeight: lineHeight*heightRate+'px',backgroundColor:backgroundColor}"
:class="{'no-border': !border , 'no-resize': !resize}"
class="auto-textarea-input"
>
</textarea>
</div>
</template>
<script>
import commonMixin from "../../../moblie/commonMixin";
export default {
mixins:[commonMixin],
name:'yunTextarea',
data(){
return {
temp_value:(()=>{
return this.value
})(),
s_autofocus:(()=>{
if(this.autofocus){
return 'autofocus'
}else{
return null
}
})()
}
},
props: {
fullHeight: {
type: Boolean,
default: false
},
backgroundColor:{
type: String,
default: ''
},
minHeight:{
type: Number,
default: 100
},
autofocus: {
type: Boolean,
default: false
},
value: {
type: String,
default: ''
},
placeholder: {
type: String,
default: ''
},
border: {
type: Boolean,
default: false
},
resize: {
type: Boolean,
default: false
},
onchange: {
type: Function,
default: null
},
fontSize: {
type: Number,
default: 14
},
lineHeight: {
type: Number,
default: 18
}
},
methods: {
change($event) {
if (this.onchange) {
this.onchange(this.temp_value , $event)
}
}
},
watch: {
value: function (val, oldVal) {
this.temp_value = val
},
temp_value: function (val, oldVal) {
this.$emit('input' , val)
}
}
}
</script>
<style lang="scss">
.auto-textarea-wrapper{
position:relative;
width:100%;
margin:0;
padding: 0;
line-height:normal;
.auto-textarea-block{
display:block;
white-space:pre-wrap;
word-wrap:break-word !important;
visibility:hidden;
overflow:hidden;
margin:0;
box-sizing:border-box;
font-size:100%;
}
.auto-textarea-input{
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
top :0;
left: 0;
margin: 0;
overflow-y: hidden;
color: #2C3E50;
outline :0 none;
border: none !important;
resize: none;
}
}
</style>
<template> <template>
<div ref="el" <div :style="computedStyle" ref="el"
class="image__wrap"
> >
<img :style="computedStyle" :src="src" alt="" v-if="loaded"/> <img :style="computedStyle" :src="src" alt="" v-if="loaded"/>
<yun-skeleton v-else :size="[skeW,skeH]" :border-r="borderR"></yun-skeleton> <yun-skeleton v-else :size="[skeW,skeH]" :border-r="borderR"></yun-skeleton>
...@@ -33,6 +34,12 @@ ...@@ -33,6 +34,12 @@
borderV:Array, borderV:Array,
borderR:Array, borderR:Array,
src:String, src:String,
maxHeight:Number,
maxWidth:Number,
LoadByScroll:{
default:true,
type:Boolean
}
}, },
computed:{ computed:{
...@@ -62,6 +69,12 @@ ...@@ -62,6 +69,12 @@
stylesObject.borderColor = borderV[2]; stylesObject.borderColor = borderV[2];
} }
} }
if(this.maxWidth){
this.returnNewLength(stylesObject,'maxWidth',this.maxWidth,remRate)
}
if(this.maxHeight){
this.returnNewLength(stylesObject,'maxHeight',this.maxHeight,remRate)
}
return stylesObject return stylesObject
...@@ -80,6 +93,7 @@ ...@@ -80,6 +93,7 @@
attempt: 0 attempt: 0
}, },
loadTimer:null, loadTimer:null,
} }
}, },
created () { created () {
...@@ -131,17 +145,22 @@ ...@@ -131,17 +145,22 @@
}, },
checkInView () { checkInView () {
clearTimeout(this.loadTimer) clearTimeout(this.loadTimer)
if(process.browser){ if(this.LoadByScroll){
this.loadTimer = setTimeout(()=>{ if(process.browser){
let eleClientTop = this.$refs.el?this.$refs.el.getBoundingClientRect().top:200; this.loadTimer = setTimeout(()=>{
let clientHeight = document.documentElement.clientHeight; let eleClientTop = this.$refs.el?this.$refs.el.getBoundingClientRect().top:200;
if(eleClientTop<clientHeight){ let clientHeight = document.documentElement.clientHeight;
this.load() if(eleClientTop<clientHeight){
} this.load()
},1000) }
},1000)
}
}else{
this.load()
} }
}, },
load (onFinish = noop) { load (onFinish = noop) {
if ((this.state.attempt > this.options.attempt - 1) && this.state.error) { if ((this.state.attempt > this.options.attempt - 1) && this.state.error) {
...@@ -169,10 +188,9 @@ ...@@ -169,10 +188,9 @@
<style scoped> <style scoped>
img{ .image__wrap{
/*width:auto;*/ display: flex;
/*height:auto;*/ justify-content: center;
/*max-width: 100%;*/ align-items: center;
/*max-height: 100%;*/
} }
</style> </style>
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
:show-ske="false" :show-ske="false"
:font-style="[16,36,500,'#00AAE6','center']" :font-style="[16,36,500,'#00AAE6','center']"
:bg-color-v="commonReturnPrimaryColor(0.2)" :bg-color-v="commonReturnPrimaryColor(0.2)"
v-if="value && !leftWord" v-if="value &&showClose"
> >
<yun-icon name="close1" v-tap="tapClose" :size="16" color="#00AAE6"></yun-icon> <yun-icon name="close1" v-tap="tapClose" :size="16" color="#00AAE6"></yun-icon>
</yun-div> </yun-div>
...@@ -130,6 +130,10 @@ ...@@ -130,6 +130,10 @@
type:Boolean, type:Boolean,
default:true, default:true,
}, },
showClose:{
type:Boolean,
default:false,
},
value: [String, Number], value: [String, Number],
placeholder:String, placeholder:String,
validate:{ validate:{
......
<template> <template>
<yun-div> <yun-div>
<!-- 头部带搜索框-->
<yun-div <yun-div
v-if="false"
:extend-style="{ :extend-style="{
position:'fixed', position:'fixed',
maxWidth:'750px', maxWidth:'750px',
...@@ -27,7 +29,7 @@ ...@@ -27,7 +29,7 @@
:src="BCLogo"> :src="BCLogo">
</yun-img> </yun-img>
<!--search--> <!--search-->
<yun-input v-model="searchValue" :show-left="true" :border-r="[28]" :border-v="[1,'solid',this.commonReturnPrimaryColor(0.2)]"></yun-input> <yun-input :showClose="true" v-model="searchValue" :show-left="true" :border-r="[28]" :border-v="[1,'solid',this.commonReturnPrimaryColor(0.2)]"></yun-input>
<!--right-button--> <!--right-button-->
<yun-div <yun-div
:width-v="144" :width-v="144"
...@@ -62,6 +64,7 @@ ...@@ -62,6 +64,7 @@
</yun-div> </yun-div>
</yun-div> </yun-div>
<!-- 导航栏-->
<yun-div <yun-div
:extend-style="{ :extend-style="{
position:'fixed', position:'fixed',
...@@ -72,7 +75,7 @@ ...@@ -72,7 +75,7 @@
}" }"
v-if="showMenu" v-if="showMenu"
:width-v="750" :width-v="750"
:position-v="[76,0,0,0]" :position-v="[84,0,0,0]"
:padding-v="[64,66,0]" :padding-v="[64,66,0]"
:margin-v="[0,'auto']" :margin-v="[0,'auto']"
bg-color-v="#fff" bg-color-v="#fff"
...@@ -133,7 +136,62 @@ ...@@ -133,7 +136,62 @@
</yun-div> </yun-div>
</yun-div> </yun-div>
<!-- 头部带搜索框 pad-->
<yun-div :heightV="headerPadHeight"></yun-div> <yun-div :heightV="headerPadHeight"></yun-div>
<!-- 头部带返回箭头-->
<yun-div
:extend-style="{
position:'fixed',
maxWidth:'750px',
boxSizing:'border-box',
zIndex:headerZIndex,
boxShadow:`0 ${1*heightRate}px 0 rgba(0,0,0,.1)`,
}"
:width-v="750"
:position-v="[0,0,undefined,0]"
:padding-v="[0,paddingL,0,paddingL]"
:margin-v="[0,'auto']"
bg-color-v="#fff"
>
<yun-div
:height-v="84"
:flex-v="['row','space-between','center']"
:width-v="699"
>
<!-- back icon-->
<yun-div
:height-v="56"
:border-r="[28]"
:show-ske="false"
:font-style="[28,56,500,'#666','center']"
>
<yun-icon name="arrow-back" :size="28"></yun-icon>
</yun-div>
<!-- title-->
<yun-div
:height-v="56"
:border-r="[28]"
:show-ske="false"
:font-style="[30,56,500,'#2F2F2F','center']"
>
文章详情
</yun-div>
<!-- menu-->
<yun-div
:height-v="56"
:border-r="[28]"
:show-ske="false"
:font-style="[28,56,500,'#666','center']"
>
<yun-icon name="menu2" :size="28"></yun-icon>
</yun-div>
</yun-div>
</yun-div>
<!-- -->
</yun-div> </yun-div>
</template> </template>
......
<template>
</template>
<script> </script>
...@@ -6,6 +6,7 @@ import Indicator from '../components/common/activityIndicator'; ...@@ -6,6 +6,7 @@ import Indicator from '../components/common/activityIndicator';
import Toast from '../components/common/toast'; import Toast from '../components/common/toast';
import YunDialog from '../components/common/dialog'; import YunDialog from '../components/common/dialog';
import YunInput from '../components/common/input'; import YunInput from '../components/common/input';
import AutoTextarea from '../components/common/auto-textarea';
import YunSlider from '../components/common/slideBox'; import YunSlider from '../components/common/slideBox';
import YunIcon from '../components/common/icon'; import YunIcon from '../components/common/icon';
import YunImg from '../components/common/image'; import YunImg from '../components/common/image';
...@@ -18,6 +19,7 @@ Vue.prototype.$message = Toast ...@@ -18,6 +19,7 @@ Vue.prototype.$message = Toast
Vue.prototype.$messageBox = YunDialog Vue.prototype.$messageBox = YunDialog
Vue.use(YunAdaptableCon) Vue.use(YunAdaptableCon)
Vue.use(AutoTextarea)
Vue.use(Indicator) Vue.use(Indicator)
Vue.use(YunDialog) Vue.use(YunDialog)
Vue.use(YunInput) Vue.use(YunInput)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment