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 @@
"description": "",
"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",
"name": "yun-icon-down_arrow2",
"font_class": "yun-icon--down_arrow2",
......
......@@ -20,6 +20,12 @@ Created by iconfont
/>
<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" />
......
No preview for this file type
......@@ -84,6 +84,8 @@ table {
border-spacing: 0
}
body, html {
font-size:1px;
max-width:750px;
margin:0 auto;
......
......@@ -100,6 +100,7 @@ tag: yun-input
|leftWord|左边嵌入的文字|String|-|-|
|bgColorV|背景颜色|String|-|-|
|showIcon|是否展示搜索icon|Boolean|true|-|
|showClose|是否展示关闭icon|Boolean|false|-|
|placeholder|placeholder|String|-|-|
|validate|正则数组|Array|-|示例:[ {regex:/^[0-9]*$/,alertWord:'请输入数字!'}]|
---
......
......@@ -170,6 +170,8 @@
stylesObject.flexShrink=0;
}
if(this.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>
<div ref="el"
<div :style="computedStyle" ref="el"
class="image__wrap"
>
<img :style="computedStyle" :src="src" alt="" v-if="loaded"/>
<yun-skeleton v-else :size="[skeW,skeH]" :border-r="borderR"></yun-skeleton>
......@@ -33,6 +34,12 @@
borderV:Array,
borderR:Array,
src:String,
maxHeight:Number,
maxWidth:Number,
LoadByScroll:{
default:true,
type:Boolean
}
},
computed:{
......@@ -62,6 +69,12 @@
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
......@@ -80,6 +93,7 @@
attempt: 0
},
loadTimer:null,
}
},
created () {
......@@ -131,17 +145,22 @@
},
checkInView () {
clearTimeout(this.loadTimer)
if(process.browser){
this.loadTimer = setTimeout(()=>{
let eleClientTop = this.$refs.el?this.$refs.el.getBoundingClientRect().top:200;
let clientHeight = document.documentElement.clientHeight;
if(eleClientTop<clientHeight){
this.load()
}
},1000)
if(this.LoadByScroll){
if(process.browser){
this.loadTimer = setTimeout(()=>{
let eleClientTop = this.$refs.el?this.$refs.el.getBoundingClientRect().top:200;
let clientHeight = document.documentElement.clientHeight;
if(eleClientTop<clientHeight){
this.load()
}
},1000)
}
}else{
this.load()
}
},
load (onFinish = noop) {
if ((this.state.attempt > this.options.attempt - 1) && this.state.error) {
......@@ -169,10 +188,9 @@
<style scoped>
img{
/*width:auto;*/
/*height:auto;*/
/*max-width: 100%;*/
/*max-height: 100%;*/
.image__wrap{
display: flex;
justify-content: center;
align-items: center;
}
</style>
......@@ -65,7 +65,7 @@
:show-ske="false"
:font-style="[16,36,500,'#00AAE6','center']"
: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-div>
......@@ -130,6 +130,10 @@
type:Boolean,
default:true,
},
showClose:{
type:Boolean,
default:false,
},
value: [String, Number],
placeholder:String,
validate:{
......
<template>
<yun-div>
<!-- 头部带搜索框-->
<yun-div
v-if="false"
:extend-style="{
position:'fixed',
maxWidth:'750px',
......@@ -27,7 +29,7 @@
:src="BCLogo">
</yun-img>
<!--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-->
<yun-div
:width-v="144"
......@@ -62,6 +64,7 @@
</yun-div>
</yun-div>
<!-- 导航栏-->
<yun-div
:extend-style="{
position:'fixed',
......@@ -72,7 +75,7 @@
}"
v-if="showMenu"
:width-v="750"
:position-v="[76,0,0,0]"
:position-v="[84,0,0,0]"
:padding-v="[64,66,0]"
:margin-v="[0,'auto']"
bg-color-v="#fff"
......@@ -133,7 +136,62 @@
</yun-div>
</yun-div>
<!-- 头部带搜索框 pad-->
<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>
</template>
......
<template>
</template>
<script> </script>
......@@ -6,6 +6,7 @@ import Indicator from '../components/common/activityIndicator';
import Toast from '../components/common/toast';
import YunDialog from '../components/common/dialog';
import YunInput from '../components/common/input';
import AutoTextarea from '../components/common/auto-textarea';
import YunSlider from '../components/common/slideBox';
import YunIcon from '../components/common/icon';
import YunImg from '../components/common/image';
......@@ -18,6 +19,7 @@ Vue.prototype.$message = Toast
Vue.prototype.$messageBox = YunDialog
Vue.use(YunAdaptableCon)
Vue.use(AutoTextarea)
Vue.use(Indicator)
Vue.use(YunDialog)
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