Commit f153f60a authored by yuwenwen's avatar yuwenwen

替换表情包

parent dc7417ed
@font-face { @font-face {
font-family: "iconfont"; /* Project id 5028537 */ font-family: "iconfont"; /* Project id 5030701 */
src: url('iconfont.woff2?t=1758609551078') format('woff2'), /* Color fonts */
url('iconfont.woff?t=1758609551078') format('woff'), src:
url('iconfont.ttf?t=1758609551078') format('truetype'); url('iconfont.woff2?t=1758858203810') format('woff2'),
url('iconfont.woff?t=1758858203810') format('woff'),
url('iconfont.ttf?t=1758858203810') format('truetype');
} }
.iconfont { .iconfont {
font-family: "iconfont" !important; font-family: "iconfont" !important;
font-size: 40rpx; font-size: 24px;
font-style: normal; font-style: normal;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-chijing:before { .icon-biaoqing-bugaoxing:before {
content: "\e600"; content: "\e65b";
} }
.icon-dai:before { .icon-meigui:before {
content: "\e601"; content: "\e62f";
} }
.icon-mogui:before { .icon-a-heshi:before {
content: "\e602"; content: "\e6af";
} }
.icon-ganga:before { .icon-a-jizhi:before {
content: "\e603"; content: "\e6b1";
} }
.icon-qin:before { .icon-be024:before {
content: "\e604"; content: "\e667";
} }
.icon-nu:before { .icon-emo_bucuo:before {
content: "\e605"; content: "\e6a6";
} }
.icon-shengqi:before { .icon-huaji:before {
content: "\e606"; content: "\e601";
} }
.icon-ma:before { .icon-neijiu:before {
content: "\e607"; content: "\e600";
} }
.icon-bishi:before { .icon-icon-test:before {
content: "\e608"; content: "\e60d";
} }
.icon-maimeng:before { .icon-icon-test1:before {
content: "\e609"; content: "\e60f";
} }
.icon-jingdai:before { .icon-jingdai:before {
content: "\e60a"; content: "\e627";
}
.icon-coolapk_emotion__koubi:before {
content: "\e615";
}
.icon-liuhan:before {
content: "\e603";
}
.icon-qinqin:before {
content: "\e610";
} }
.icon-kulian:before { .icon-kulian:before {
content: "\e60b"; content: "\e611";
}
.icon-jingxi:before {
content: "\e616";
}
.icon-feiwen:before {
content: "\e700";
}
.icon-zaijian:before {
content: "\e61f";
}
.icon-shuizhao-01:before {
content: "\e669";
}
.icon-biaoqing-weixiao:before {
content: "\e65f";
}
.icon-ico_emoji_26:before {
content: "\e67f";
}
.icon-a-ziyuan135:before {
content: "\e60c";
}
.icon-a-ziyuan123:before {
content: "\e60e";
}
.icon-emoji-18:before {
content: "\e69b";
}
.icon-a-Facewithcoldsweat:before {
content: "\e64a";
}
.icon-a-kelian:before {
content: "\e6aa";
}
.icon-bangzhuzhongxin:before {
content: "\e634";
}
.icon-a-Thumbsup:before {
content: "\e656";
} }
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -8,6 +8,7 @@ import './assets/styles/element-variables.scss' ...@@ -8,6 +8,7 @@ import './assets/styles/element-variables.scss'
import '@/assets/styles/index.scss' // global css import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css import '@/assets/styles/ruoyi.scss' // ruoyi css
import '../public/iconfont/iconfont.css' import '../public/iconfont/iconfont.css'
import '../public/iconfont/iconfont.js'
import App from './App' import App from './App'
import store from './store' import store from './store'
import router from './router' import router from './router'
......
const emotions = [{ const emotions = [{
code: 'icon-chijing', code: 'icon-meigui',
name: '吃惊', name: '玫瑰',
symbol: '[吃惊]' symbol: '[玫瑰]'
}, },
{ {
code: 'icon-dai', code: 'icon-a-heshi',
name: '', name: '合十',
symbol: '[]' symbol: '[合十]'
}, },
{ {
code: 'icon-mogui', code: 'icon-a-jizhi',
name: '魔鬼', name: '机智',
symbol: '[魔鬼]' symbol: '[机智]'
}, },
{ {
code: 'icon-ganga', code: 'icon-huaji',
name: '尴尬', name: '滑稽',
symbol: '[尴尬]' symbol: '[滑稽]'
}, },
{ {
code: 'icon-qin', code: 'icon-be024',
name: '', name: '兴奋',
symbol: '[]' symbol: '[兴奋]'
}, },
{ {
code: 'icon-nu', code: 'icon-emo_bucuo',
name: '', name: '调皮',
symbol: '[]' symbol: '[调皮]'
}, },
{ {
code: 'icon-shengqi', code: 'icon-neijiu',
name: '生气', name: '内疚',
symbol: '[生气]' symbol: '[内疚]'
}, },
{ {
code: 'icon-ma', code: 'icon-icon-test',
name: '', name: '疲倦',
symbol: '[]' symbol: '[疲倦]'
}, },
{ {
code: 'icon-bishi', code: 'icon-icon-test1',
name: '鄙视', name: '大哭',
symbol: '[鄙视]' symbol: '[大哭]'
},
{
code: 'icon-maimeng',
name: '卖萌',
symbol: '[卖萌]'
}, },
{ {
code: 'icon-jingdai', code: 'icon-jingdai',
name: '惊呆', name: '惊呆',
symbol: '[惊呆]' symbol: '[惊呆]'
}, },
{
code: 'icon-coolapk_emotion__koubi',
name: '抠鼻',
symbol: '[抠鼻]'
},
{
code: 'icon-liuhan',
name: '流汗',
symbol: '[流汗]'
},
{
code: 'icon-qinqin',
name: '亲亲',
symbol: '[亲亲]'
},
{ {
code: 'icon-kulian', code: 'icon-kulian',
name: '哭脸', name: '哭脸',
symbol: '[哭脸]' symbol: '[哭脸]'
}, },
{
code: 'icon-jingxi',
name: '惊喜',
symbol: '[惊喜]'
},
{
code: 'icon-zaijian',
name: '再见',
symbol: '[再见]'
},
{
code: 'icon-shuizhao-01',
name: '睡着了',
symbol: '[睡着了]'
},
{
code: 'icon-biaoqing-weixiao',
name: '微笑',
symbol: '[微笑]'
},
{
code: 'icon-ico_emoji_26',
name: '叹气',
symbol: '[叹气]'
},
{
code: 'icon-feiwen',
name: '飞吻',
symbol: '[飞吻]'
},
{
code: 'icon-a-ziyuan135',
name: '偷笑',
symbol: '[偷笑]'
},
{
code: 'icon-a-ziyuan123',
name: '鼓掌',
symbol: '[鼓掌]'
},
{
code: 'icon-emoji-18',
name: '抓狂',
symbol: '[抓狂]'
},
{
code: 'icon-a-Facewithcoldsweat',
name: '尴尬',
symbol: '[尴尬]'
},
{
code: 'icon-a-kelian',
name: '可怜',
symbol: '[可怜]'
},
{
code: 'icon-bangzhuzhongxin',
name: '爱心',
symbol: '[爱心]'
},
{
code: 'icon-a-Thumbsup',
name: '点赞',
symbol: '[点赞]'
},
{
code:'icon-biaoqing-bugaoxing',
name: '不高兴',
symbol: '[不高兴]'
}
] ]
......
...@@ -73,6 +73,7 @@ ...@@ -73,6 +73,7 @@
} from '@/utils/auth.js'; } from '@/utils/auth.js';
import $modal from '@/utils/modal.js' import $modal from '@/utils/modal.js'
import VideoPreview from './VideoPreview.vue'; import VideoPreview from './VideoPreview.vue';
import emotions from '@/utils/emjo';
export default { export default {
name: 'BatchImageUpload', name: 'BatchImageUpload',
props: { props: {
...@@ -116,67 +117,7 @@ ...@@ -116,67 +117,7 @@
isVideo: false, isVideo: false,
isImg: false, isImg: false,
limiData: undefined, limiData: undefined,
emotions: [{ emotions,
code: 'icon-chijing',
name: '吃惊',
symbol: '[吃惊]'
},
{
code: 'icon-dai',
name: '',
symbol: '[呆]'
},
{
code: 'icon-mogui',
name: '魔鬼',
symbol: '[魔鬼]'
},
{
code: 'icon-ganga',
name: '尴尬',
symbol: '[尴尬]'
},
{
code: 'icon-qin',
name: '',
symbol: '[亲]'
},
{
code: 'icon-nu',
name: '',
symbol: '[怒]'
},
{
code: 'icon-shengqi',
name: '生气',
symbol: '[生气]'
},
{
code: 'icon-ma',
name: '',
symbol: '[骂]'
},
{
code: 'icon-bishi',
name: '鄙视',
symbol: '[鄙视]'
},
{
code: 'icon-maimeng',
name: '卖萌',
symbol: '[卖萌]'
},
{
code: 'icon-jingdai',
name: '惊呆',
symbol: '[惊呆]'
},
{
code: 'icon-kulian',
name: '哭脸',
symbol: '[哭脸]'
},
],
showEmjo: false, showEmjo: false,
clientX: 0, clientX: 0,
clientY: 0 clientY: 0
...@@ -459,6 +400,12 @@ ...@@ -459,6 +400,12 @@
handleSelectEmjo(emotion){ handleSelectEmjo(emotion){
this.showEmjo = false this.showEmjo = false
this.$emit('handleEmjo',emotion) this.$emit('handleEmjo',emotion)
},
// 关闭表情窗
closeEmjo(){
if(this.showEmjo){
this.showEmjo = false
}
} }
} }
}; };
...@@ -553,13 +500,12 @@ ...@@ -553,13 +500,12 @@
} }
.emotion-item { .emotion-item {
width: 20%; width: 14%;
height:80rpx; height:100rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 26px; font-size: 24px;
color: #333;
} }
} }
</style> </style>
\ No newline at end of file
...@@ -3,6 +3,8 @@ import App from './App' ...@@ -3,6 +3,8 @@ import App from './App'
import { createSSRApp } from 'vue' import { createSSRApp } from 'vue'
import store from './store' import store from './store'
import './static/iconfont/iconfont.js'
export function createApp() { export function createApp() {
const app = createSSRApp(App) const app = createSSRApp(App)
app.use(store) app.use(store)
......
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
</view> </view>
<view class="publish-box"> <view class="publish-box">
<textarea class="textarea" v-model="form.content" placeholder="分享有趣事~" <textarea class="textarea" v-model="form.content" placeholder="分享有趣事~"
placeholder-class="placeholder-class" /> placeholder-class="placeholder-class" @focus="handleFocus" />
<image-upload v-model="form.attachments" :limit="9" :showIcons="true" <image-upload v-model="form.attachments" ref="uploadRef" :limit="9" :showEmjo="showEmjo" :showIcons="true"
@componentsType="handleSetComponentsType" @handleTopic="handleOpenTopicSelection" @componentsType="handleSetComponentsType" @handleTopic="handleOpenTopicSelection"
@handleEmjo="handleAddEmjo"></image-upload> @handleEmjo="handleAddEmjo"></image-upload>
</view> </view>
...@@ -154,7 +154,8 @@ ...@@ -154,7 +154,8 @@
}, },
voteOptionsAffirmative: [], voteOptionsAffirmative: [],
voteOptionsOpposing: [], voteOptionsOpposing: [],
emotions emotions,
showEmjo:false
} }
}, },
components: { components: {
...@@ -318,11 +319,16 @@ ...@@ -318,11 +319,16 @@
}); });
}, },
// textarea聚焦时关闭表情窗口
handleFocus(){
this.$refs.uploadRef.closeEmjo()
},
// 添加表情 // 添加表情
handleAddEmjo(emotion) { handleAddEmjo(emotion) {
console.log(emotion) console.log(emotion)
this.form.content = this.form.content + emotion.symbol this.form.content = this.form.content + emotion.symbol
}, },
// 删除表情
deleteContent() { deleteContent() {
// 1. 处理 form.content 为空的情况,直接返回避免报错 // 1. 处理 form.content 为空的情况,直接返回避免报错
if (!this.form.content || this.form.content.trim() === '') { if (!this.form.content || this.form.content.trim() === '') {
......
@font-face { @font-face {
font-family: "iconfont"; /* Project id 5028537 */ font-family: "iconfont"; /* Project id 5030701 */
src: url('iconfont.woff2?t=1758609551078') format('woff2'), /* Color fonts */
url('iconfont.woff?t=1758609551078') format('woff'), src:
url('iconfont.ttf?t=1758609551078') format('truetype'); url('iconfont.woff2?t=1758858203810') format('woff2'),
url('iconfont.woff?t=1758858203810') format('woff'),
url('iconfont.ttf?t=1758858203810') format('truetype');
} }
.iconfont { .iconfont {
font-family: "iconfont" !important; font-family: "iconfont" !important;
font-size: 40rpx; font-size: 24px;
font-style: normal; font-style: normal;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-chijing:before { .icon-biaoqing-bugaoxing:before {
content: "\e600"; content: "\e65b";
} }
.icon-dai:before { .icon-meigui:before {
content: "\e601"; content: "\e62f";
} }
.icon-mogui:before { .icon-a-heshi:before {
content: "\e602"; content: "\e6af";
} }
.icon-ganga:before { .icon-a-jizhi:before {
content: "\e603"; content: "\e6b1";
} }
.icon-qin:before { .icon-be024:before {
content: "\e604"; content: "\e667";
} }
.icon-nu:before { .icon-emo_bucuo:before {
content: "\e605"; content: "\e6a6";
} }
.icon-shengqi:before { .icon-huaji:before {
content: "\e606"; content: "\e601";
} }
.icon-ma:before { .icon-neijiu:before {
content: "\e607"; content: "\e600";
} }
.icon-bishi:before { .icon-icon-test:before {
content: "\e608"; content: "\e60d";
} }
.icon-maimeng:before { .icon-icon-test1:before {
content: "\e609"; content: "\e60f";
} }
.icon-jingdai:before { .icon-jingdai:before {
content: "\e60a"; content: "\e627";
}
.icon-coolapk_emotion__koubi:before {
content: "\e615";
}
.icon-liuhan:before {
content: "\e603";
}
.icon-qinqin:before {
content: "\e610";
} }
.icon-kulian:before { .icon-kulian:before {
content: "\e60b"; content: "\e611";
}
.icon-jingxi:before {
content: "\e616";
}
.icon-feiwen:before {
content: "\e700";
}
.icon-zaijian:before {
content: "\e61f";
}
.icon-shuizhao-01:before {
content: "\e669";
}
.icon-biaoqing-weixiao:before {
content: "\e65f";
}
.icon-ico_emoji_26:before {
content: "\e67f";
}
.icon-a-ziyuan135:before {
content: "\e60c";
}
.icon-a-ziyuan123:before {
content: "\e60e";
}
.icon-emoji-18:before {
content: "\e69b";
}
.icon-a-Facewithcoldsweat:before {
content: "\e64a";
}
.icon-a-kelian:before {
content: "\e6aa";
}
.icon-bangzhuzhongxin:before {
content: "\e634";
}
.icon-a-Thumbsup:before {
content: "\e656";
} }
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -10,7 +10,7 @@ $common-width:94vw; ...@@ -10,7 +10,7 @@ $common-width:94vw;
@mixin common-page($height) { @mixin common-page($height) {
background-color: rgba(244, 244, 244, 1); background-color: rgba(244, 244, 244, 1);
height: $height; height: $height;
color: rgba(16, 16, 16, 1);
font-size: 28rpx; font-size: 28rpx;
font-family: Arial; font-family: Arial;
padding: 2rpx 0; padding: 2rpx 0;
......
const emotions = [{ const emotions = [{
code: 'icon-chijing', code: 'icon-meigui',
name: '吃惊', name: '玫瑰',
symbol: '[吃惊]' symbol: '[玫瑰]'
}, },
{ {
code: 'icon-dai', code: 'icon-a-heshi',
name: '', name: '合十',
symbol: '[]' symbol: '[合十]'
}, },
{ {
code: 'icon-mogui', code: 'icon-a-jizhi',
name: '魔鬼', name: '机智',
symbol: '[魔鬼]' symbol: '[机智]'
}, },
{ {
code: 'icon-ganga', code: 'icon-huaji',
name: '尴尬', name: '滑稽',
symbol: '[尴尬]' symbol: '[滑稽]'
}, },
{ {
code: 'icon-qin', code: 'icon-be024',
name: '', name: '兴奋',
symbol: '[]' symbol: '[兴奋]'
}, },
{ {
code: 'icon-nu', code: 'icon-emo_bucuo',
name: '', name: '调皮',
symbol: '[]' symbol: '[调皮]'
}, },
{ {
code: 'icon-shengqi', code: 'icon-neijiu',
name: '生气', name: '内疚',
symbol: '[生气]' symbol: '[内疚]'
}, },
{ {
code: 'icon-ma', code: 'icon-icon-test',
name: '', name: '疲倦',
symbol: '[]' symbol: '[疲倦]'
}, },
{ {
code: 'icon-bishi', code: 'icon-icon-test1',
name: '鄙视', name: '大哭',
symbol: '[鄙视]' symbol: '[大哭]'
},
{
code: 'icon-maimeng',
name: '卖萌',
symbol: '[卖萌]'
}, },
{ {
code: 'icon-jingdai', code: 'icon-jingdai',
name: '惊呆', name: '惊呆',
symbol: '[惊呆]' symbol: '[惊呆]'
}, },
{
code: 'icon-coolapk_emotion__koubi',
name: '抠鼻',
symbol: '[抠鼻]'
},
{
code: 'icon-liuhan',
name: '流汗',
symbol: '[流汗]'
},
{
code: 'icon-qinqin',
name: '亲亲',
symbol: '[亲亲]'
},
{ {
code: 'icon-kulian', code: 'icon-kulian',
name: '哭脸', name: '哭脸',
symbol: '[哭脸]' symbol: '[哭脸]'
}, },
{
code: 'icon-jingxi',
name: '惊喜',
symbol: '[惊喜]'
},
{
code: 'icon-zaijian',
name: '再见',
symbol: '[再见]'
},
{
code: 'icon-shuizhao-01',
name: '睡着了',
symbol: '[睡着了]'
},
{
code: 'icon-biaoqing-weixiao',
name: '微笑',
symbol: '[微笑]'
},
{
code: 'icon-ico_emoji_26',
name: '叹气',
symbol: '[叹气]'
},
{
code: 'icon-feiwen',
name: '飞吻',
symbol: '[飞吻]'
},
{
code: 'icon-a-ziyuan135',
name: '偷笑',
symbol: '[偷笑]'
},
{
code: 'icon-a-ziyuan123',
name: '鼓掌',
symbol: '[鼓掌]'
},
{
code: 'icon-emoji-18',
name: '抓狂',
symbol: '[抓狂]'
},
{
code: 'icon-a-Facewithcoldsweat',
name: '尴尬',
symbol: '[尴尬]'
},
{
code: 'icon-a-kelian',
name: '可怜',
symbol: '[可怜]'
},
{
code: 'icon-bangzhuzhongxin',
name: '爱心',
symbol: '[爱心]'
},
{
code: 'icon-a-Thumbsup',
name: '点赞',
symbol: '[点赞]'
},
{
code:'icon-biaoqing-bugaoxing',
name: '不高兴',
symbol: '[不高兴]'
}
] ]
......
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