, поэтому, как часть моего vue приложения, у меня есть выбор изображений в качестве флажков. При щелчке по изображению отображается его значение. Например, выбранные изображения указывают преимущества для определенных компаний, поэтому при щелчке по значку больницы отображается «Медицинское страхование». Тем не менее, я хотел бы также распечатать соответствующую иконку больницы. Как мне это сделать? Код выглядит следующим образом:
new Vue({
el: '???',
data: {}
methods: {
modalAction() {
if (this.modal == false) {
this.modal = true
} else {
this.modal = false
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<el-form @submit.native.prevent class="bordered" v-loading="loadingCompanyInfo">
<el-row :gutter="20">
<span class="h3 tab_title">We are {{ companyInfo.name }}</span>
<el-col :span="24">
<label>Company Description</label>
<el-form-item :required="true" :error="retrieveFieldError('description')">
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" placeholder="Please tell us in less than 100 characters, a high level overview of your company" max="100" v-model="companyInfo.description"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="16">
<label>Company videos (up to 2)</label>
<div class="el-upload__tip">Keep videos less than 100MB</div>
<el-form-item :required="true">
<el-upload
class="upload-logo"
drag
name="video"
:headers="uploadRequestHeaders"
:action="companyMediaVideoUploadUrl"
:on-remove="handleRemove"
:on-success="onUploadComplete"
list-type="video"
:file-list="getExistingCompanyVideoFilelist"
:limit="2"
>
<div class="el-upload__text">Upload videos</div>
</el-upload>
<!-- <iframe :src="video.preview" width="640" height="320" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" title="company-media-189" data-ready="true"></iframe>-->
</el-form-item>
</el-col>
</el-row>
<span class="h3 tab_title">Company Bio</span>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item :required="true" :error="retrieveFieldError('image')">
<image-uploader
v-on:success="onUploadComplete"
:height="455"
:width="500"
:quality="0.8"
:headers="uploadRequestHeaders"
:action="companyMediaBioImagesUploadUrl"
:existing=bioImg
:auto-upload="false"
ref="imageUpload"
v-slot="slotProps"
>
<div class="sme-upload sme-upload--drag">
<div tabindex="0" class="el-upload el-upload--text">
<div class="el-upload-dragger">
<img :src="slotProps.preview" v-if="slotProps.preview" class="avatar">
<i class="el-icon-picture-outline" v-if="!slotProps.preview"></i>
<div class="el-upload__text" v-if="!slotProps.preview">Drag image or <em>click to upload</em></div>
</div>
<input type="file" name="image" class="el-upload__input">
</div>
</div>
</image-uploader>
</el-form-item>
</el-col>
<el-col :span="16">
<label>Company Bio</label>
<el-form-item :required="true" :error="retrieveFieldError('bio')">
<el-input type="textarea" :autosize="{ minRows: 14, maxRows: 16}" placeholder="Please tell us more about your company" v-model="companyInfo.bio"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="16">
<label>Company Benefits</label>
<el-form-item :required="true" :error="retrieveFieldError('Benefits')">
<span>{{checkedBenefits}}</span>
</el-form-item>`
</el-col>
<el-col :span="16">
<label>Company Culture</label>
<el-form-item :required="true" :error="retrieveFieldError('culture')">
<el-input type="textarea" :autosize="{ minRows: 14, maxRows: 16}" placeholder="Please tell us about the culture of your company" v-model="companyInfo.culture"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :required="true" :error="retrieveFieldError('image')">
<image-uploader
v-on:success="onUploadComplete"
:height="455"
:width="500"
:quality="0.8"
:headers="uploadRequestHeaders"
:action="companyMediaBioImagesUploadUrl"
:existing="cultureImg"
:auto-upload="true"
:preview=true
ref="imageUpload"
v-slot="slotProps"
>
<div class="sme-upload sme-upload--drag">
<div tabindex="0" class="el-upload el-upload--text">
<div class="el-upload-dragger">
<img :src="slotProps.preview" v-if="slotProps.preview" class="avatar">
<i class="el-icon-picture-outline" v-if="!slotProps.preview"></i>
<div class="el-upload__text" v-if="!slotProps.preview">Drag image or <em>click to upload</em></div>
</div>
<input type="file" name="image" class="el-upload__input">
</div>
</div>
</image-uploader>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<span class="h3 tab_title">Our Team</span>
<el-col :span="24">
<label>Team Images (up to 3)</label>
<el-form-item :required="true">
<el-upload
class="upload-logo"
drag
draggable="true"
name="image"
:width="500"
:quality="0.8"
:headers="uploadRequestHeaders"
:action="companyMediaTeamUploadUrl"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-success="onUploadComplete"
list-type="picture"
:file-list="getExistingTeamFilelist"
:limit="3"
>
<div class="el-upload__text">Upload images</div>
<div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-button @click="updateCompanyInfo()" :loading="isLoading" type="primary">Update profile</el-button>
<el-button @click = "modalAction()" style = "background-color: #02DE7F"class="bg-teal text-white font-bold px-4 py-2 rounded-full">Benefits</el-button>
<div v-if ="modal" class="bg-black absolute pin-t pin-l h-screen w-full flex items-center justify-center">
<div class = "bg-white p-4 rounded w-1/3">
<ul>
<li><input type="checkbox" id=cb1 value="Health Insurance" v-model="checkedBenefits"/>
<label for="cb1"><img src="https://pngimage.net/wp-content/uploads/2018/06/health-insurance-icon-png-8.png" /></label>
<p>Health Insurance</p>
</li>
<li><input type="checkbox" id="cb2" value="Vacation/Paid Annual Leave" v-model="checkedBenefits"/>
<label for="cb2"><img src="http://www.myiconfinder.com/uploads/iconsets/256-256-3cea34f4f64da133115b80638b96a2be.png" /></label>
<p>Paid Leave/Vacation Time</p>
</li>
<li><input type="checkbox" id="cb3" value="Performance Bonus" v-model="checkedBenefits"/>
<label for="cb3"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/bonus-1-477755.png" /></label>
<p>Performance Bonus</p>
</li>
<li><input type="checkbox" id="cb4" value="Paid Sick Days" v-model="checkedBenefits"/>
<label for="cb4"><img src="https://www.optimarecruitment.co.uk/wp-content/uploads/2017/02/Sick-Day.png" /></label>
<p>Paid Sick Days</p>
</li>
<li><input type="checkbox" id="cb5" value="Pension Scheme" v-model="checkedBenefits"/>
<label for="cb5"><img src="https://image.flaticon.com/icons/png/512/1117/1117871.png" /></label>
<p>Pension Plan</p>
</li>
<li><input type="checkbox" id="cb6" value="Flexible Working Schedule" v-model="checkedBenefits"/>
<label for="cb6"><img src="https://www.pngkit.com/png/full/275-2758258_pink-pink-clock-clip-art-flexible-working-hours.png" /></label>
<p>Flexi-Hours</p>
</li>
<li><input type="checkbox" id="cb7" value="Fun Office Perks" v-model="checkedBenefits"/>
<label for="cb7"><img src="https://cdn3.iconfinder.com/data/icons/video-game-11/112/24-video-game_gamer-male-african-american-1-512.png" /></label>
<p>Fun Office</p>
</li>
<li><input type="checkbox" id="cb8" value="Employment Development Programs" v-model="checkedBenefits"/>
<label for="cb8"><img src="https://www.freeiconspng.com/uploads/operations-training-icon-8.png" /></label>
<p>Development Programs</p>
</li>
<li><input type="checkbox" id="cb9" value="Tuition Reimbursement for Related Courses" v-model="checkedBenefits"/>
<label for="cb9"><img src="https://image.flaticon.com/icons/png/512/1702/1702608.png" /></label>
<p>Tuition Reimbursement</p>
</li>
<li><input type="checkbox" id="cb10" value="Employee Discount" v-model="checkedBenefits"/>
<label for="cb10"><img src="https://image.flaticon.com/icons/png/512/621/621535.png" /></label>
<p>Employee Discount</p>
</li>
<li><input type="checkbox" id="cb11" value="Free Gym Membership and/or Wellness Programs" v-model="checkedBenefits"/>
<label for="cb11"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/gym-member-4-1147870.png" /></label>
<p>Gym Membership</p>
</li>
<li><input type="checkbox" id="cb12" value="Stock Options and/or Equity" v-model="checkedBenefits"/>
<label for="cb12"><img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/equity-1750610-1488657.png" /></label>
<p>Stock Options</p>
</li>
<li><input type="checkbox" id="cb13" value="A Diversity Program" v-model="checkedBenefits"/>
<label for="cb13"><img src="https://cdn3.iconfinder.com/data/icons/life-concepts-lifestyles/128/safe-space-people-color-512.png" /></label>
<p>Diversity Program</p>
</li>
<li><input type="checkbox" id="cb14" value="Opportunity to Travel" v-model="checkedBenefits"/>
<label for="cb14"><img src="https://cdn4.iconfinder.com/data/icons/aviation-cobalt/512/travel_globe_airplane_plane_international_flight_world_transportation-512.png" /></label>
<p>Opportunity to Travel</p>
</li>
<li><input type="checkbox" id="cb15" value="Remote Working" v-model="checkedBenefits"/>
<label for="cb15"><img src="https://www.learngeek.co/wp-content/uploads/2016/01/ICON-WFH.png" /></label>
<p>Remote Working</p>
</li>
<li><input type="checkbox" id="cb16" value="Sabbatical Leave" v-model="checkedBenefits"/>
<label for="cb16"><img src="https://womanofscience.files.wordpress.com/2015/11/sabbatical-1.png" /></label>
<p>Sabbatical Leave</p>
</li>
<li><input type="checkbox" id="cb17" value="Student Loan Repayments" v-model="checkedBenefits"/>
<label for="cb17"><img src="https://hireclix.github.io/hosting/banfield/images/program-payment_icon.png" /></label>
<p>Student Loan Repayment</p>
</li>
<li><input type="checkbox" id="cb18" value="Pet-Friendly Offices" v-model="checkedBenefits"/>
<label for="cb18"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/pet-friendly-1635254-1390013.png" /></label>
<p>Pet Friendly Office</p>
</li>
<li><input type="checkbox" id="cb19" value="4-Day Work Week" v-model="checkedBenefits"/>
<label for="cb19"><img src="https://www.sandiego.gov/sites/default/files/police-4-day-work-weeks.png" /></label>
<p>4-Day Work Week</p>
</li>
<li><input type="checkbox" id="cb20" value="Casual Dress" v-model="checkedBenefits"/>
<label for="cb20"><img src="http://www.transparentpng.com/thumb/sports-wear/form-clothes-icon-packs-png-14.png" /></label>
<p>Casual Dress</p>
</li>
<li><input type="checkbox" id="cb21" value="Free Parking" v-model="checkedBenefits"/>
<label for="cb21"><img src="https://image.flaticon.com/icons/svg/1306/1306001.svg" /></label>
<p>Free on-site Parking</p>
</li>
<li><input type="checkbox" id="cb22" value="Free City Bike Pass" v-model="checkedBenefits"/>
<label for="cb22"><img src="https://www.pngrepo.com/download/780/bicycle.png" /></label>
<p>City-Bike</p>
</li>
<li><input type="checkbox" id="cb23" value="Free Work Laptop" v-model="checkedBenefits"/>
<label for="cb23"><img src="https://images.vexels.com/media/users/3/128132/isolated/preview/fa3b9aad78a9db81459bd03294a0f985-flat-laptop-icon-design-by-vexels.png" /></label>
<p>Free work Laptop</p>
</li>
<li><input type="checkbox" id="cb24" value="Referral Bonus" v-model="checkedBenefits"/>
<label for="cb24"><img src="https://i.pinimg.com/originals/ba/11/5e/ba115e31d67474825b59d388dd31b2d2.png" /></label>
<p>Referral Bonus</p>
</li>
<li><input type="checkbox" id="cb25" value="Open-Plan Office" v-model="checkedBenefits"/>
<label for="cb25"><img src="http://www.workatopen.com/wp-content/uploads/2019/03/icon_openspace.png" /></label>
<p>Open Office</p>
</li>
<li><input type="checkbox" id="cb26" value="Company Retreats" v-model="checkedBenefits"/>
<label for="cb26"><img src="https://www.helpscout.com/images/blog/2019/oct/how-to-plan-a-company-retreat.png" /></label>
<p>Company Retreats</p>
</li>
<li><input type="checkbox" id="cb27" value="Free day-care services" v-model="checkedBenefits"/>
<label for="cb27"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/kindergarten-1648730-1400660.png" /></label>
<p>Free day-care services</p>
</li>
<li><input type="checkbox" id="cb28" value="Competitive Salary" v-model="checkedBenefits"/>
<label for="cb28"><img src="https://st2.depositphotos.com/5266903/9617/v/950/depositphotos_96173552-stock-illustration-salary-flat-icon.jpg" /></label>
<p>Competitive Salary</p>
</li>
<li><input type="checkbox" id="cb29" value="Life Insurance" v-model="checkedBenefits"/>
<label for="cb29"><img src="https://cdn0.iconfinder.com/data/icons/life-insurance/256/Family_Life_Insurance-512.png" /></label>
<p>Life Insurance</p>
</li>
<li><input type="checkbox" id="cb30" value="Free Event Tickets" v-model="checkedBenefits"/>
<label for="cb30"><img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-4/512/Tickets-icon.png" /></label>
<p>Free Event Tickets</p>
</li>
<el-button @click="modalAction()" style="background-color: red; float: inside; color: white;"class="bg-teal text-white font-bold px-4 py-2 rounded-full">Close</el-button>
</ul>
</div>
</div>
</el-form>
</template>